最新基于Web标准的网页设计(最新修正版)

Web标准网页设计与PHP唐四薪编著清华大学出版社4.4CSS的盒子模型CSS的盒子模型盒子模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。CSS的盒子模型CSS的盒子模型每个HTML元素都可以看作是一个装了东西的盒子盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边界(magin),如图所示默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子contentpadding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottomwidthheight元素盒子大小的计算一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界IEquirk模式下盒子的宽度当将文档声明DOCTYPE删除后，IE6对网页的解释会进入quirk（怪异）模式，此时盒子的宽度等于左边框＋左填充＋宽度＋右填充＋右边框因此当使用了盒子属性后切忌删除DOCTYPECSS盒子模型计算题如果盒子里面嵌套有盒子，且两个盒子都有边框，那么两个盒子边框之间的距离等于外面盒子的填充(padding)值＋里面盒子的边界（margin）值嵌套盒子例题styletype=text/css#box1{background-color:#ddd;margin:15px;padding:5px;}#box2{color:black;background-color:#aaa;margin:20px;padding:10px0px10px;width:100px;}body{border:1pxdotted#FF0000}/style/headbodydivid=box1divid=box2这是里面的盒子/div/body边框border属性盒子模型的margin和padding属性比较简单，只能设置宽度值，最多分别对上、右、下、左设置宽度值。而边框border则可以设置宽度、颜色和样式。分别是border-width（宽度）、border-color（颜色）和border-style（样式）其中border-style属性可以将边框设置为实线（solid）、虚线（dashed）、点划线（dotted）、双线（double）等效果各种边框的效果border:4pxsolidred;/*同时设置4个边框*//*---------------------------------------*/border-bottom:6pxdoubleblack;/*---------------------------------------*/border:3pxdotted#00f;border-right:none;/*---------------------------------------*/border:5pxdashed#666;border-width:05px;边框的交汇效果边框border有个有趣的特点，即两条交汇的边框之间是一个斜角，我们可以通过为边框设置不同的颜色，再利用这个斜角，制作出像三角形一样的效果内容填充padding属性填充padding属性，也称为盒子的内边距。就是盒子边框到内容之间的距离，和表格的填充属性（cellpadding）比较相似。如果填充属性为0，则盒子边框会紧挨着内容，这样通常不美观。当对盒子设置了背景颜色或背景图像后，那么背景会覆盖padding和内容组成的范围，并且默认情况下背景图像是以padding的左上角为基准点在盒子中平铺的盒子模型的特性边界值margin可为负，填充padding不可为负边框border默认值为0，即不显示行内元素，如a，定义上下边界不影响行高对盒子模型的思考边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的，我们只能看到他们对元素的影响盒子模型中只能设置两类颜色，即边框颜色和背景颜色盒子模型可设置三类距离，即边界距margin，填充距padding和边框值border属性值的简写形式问题：padding:6px10px4px;左填充是多少？答案：如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性；如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。各种元素盒子属性的默认值大部分html元素的盒子属性:margin,padding默认值都为0；body，p，ul，li，form等少数html元素的margin,padding浏览器默认值不为0，有时有必要先设置它们的这些属性为0。input元素的边框属性默认不为0，可以设置它为0达到美化表单中输入框和按钮的目的。4.4.2盒子模型的应用1.美化表单网页中的表单控件在默认情况下背景都是灰色的，文本框边框是粗线条带立体感的，不够美观。下列代码通过CSS改变表单的边框样式、颜色和背景颜色让文本框，按钮等变得漂亮些。用盒子美化表格让表格的外边框为2象素首先用间距制作1像素边框的表格，然后用css为table元素加一个1象素宽的border制作1象素虚线边框首先将表格的边框和间距设为0，然后设置table的CSS上边框和左边框为1象素虚线，再设置td的css下边框和右边框为1象素虚线4.4.3盒子在标准流下的定位盒子的三种定位形式在标准流下的定位在浮动属性下的定位在定位属性下的定位除非设置浮动属性或定位属性，否则所有盒子都是在标准流中定位。顾名思义，标准流中元素盒子的位置由元素在HTML中的位置决定。标准流标准流下的定位：HTML元素在标准状况下的定位方式，特点如下:行内元素在同一行内横向排列块级元素占满整个一行，在页面中竖向排列元素不会移动到其它地方去，对于嵌套的元素，盒子也是嵌套的关系(嵌套说明父元素包含了子元素)标准流下的盒子排列分析styletype=text/css*{border:2pxdashed#FF0066;padding:10px;margin:2px;}/stylebodydiv网页的banner（块级元素）/divahref=#行内元素1/aahref=#行内2/aahref=#行内3/adiv这是无名块p这是盒子中的盒子/p/div行内元素的盒子行内元素的盒子永远只能在浏览器中得到一行高度的空间（行高由line-height属性决定，如果没设置该属性，则是内容的默认高度），如果给它设置上下border，margin，padding等值，导致其盒子的高度超过行高，那么它的盒子上下部分将和其他元素的盒子发生重叠。因此，不推荐对行内元素直接设置盒子属性，一般先设置行内元素以块级元素显示，再设置它的盒子属性。改变行内元素的高度如图所示，当增加行内元素的边界和填充时，行内元素a占据浏览器的高度并没有增加，下面这个div块仍然在原来的位置，导致行内元素盒子的上下部分重叠，而左右部分不会受影响display属性为了解决这个问题，可将行内元素转换成块级元素显示通过display属性可控制元素是以行内元素显示还是以块级元素显示，或不显示display:block|inline|none|list-itemblock元素block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非用width设定一个宽度div,p,h1,form,ul和li都是块级元素的例子。inline元素inline元素的特点是：和其他元素都在一行上高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变span,a,label,input,img,strong和em是inline元素的例子隐藏元素display:none;当某个元素被设置成了隐藏元素之后，浏览器会完全忽略掉这个元素，该元素将不会被显示，也不会占据文档中的位置。比较visibility:hidden;应用：制作下拉菜单、tab面板等有时就需要用display:none把菜单或面板隐藏起来需要使用display属性切换的情况1.让一个inline元素从新行开始；2.让块元素和其他元素保持在一行上；3.控制inline元素的高度（对导航条特别有用）；4.无须设定宽度即可为一个块元素设定与文字同宽的背景色标准流下定位的应用－制作竖直导航菜单#nava{font-size:14px;color:#333333;text-decoration:none;background-color:#CCCCCC;display:block;width:140px;padding:6px10px4px;border:1pxsolid#000000;margin:2px;}#nava:hover{color:#FFFFFF;background-color:#666666;}盒子的margin叠加问题盒子的margin在标准流中的计算实验1——行内元素之间的水平marginspan.left{margin-right:30px;background-color:#a9d6ff;}span.right{margin-left:40px;background-color:#eeb0b0;}行内元素之间的水平margin行内元素之间的水平margin不会叠加span2span1margin-rightmargin-left实验2——块级元素之间的竖直marginbodydivstyle=margin-bottom:50px;块元素1/divdivstyle=margin-top:30px;块元素2/div/body块元素1块元素2块元素1块元素2margin-bottom:50pxmargin-top:30pxmargin-bottom:50px块级元素之间的上下margin空白边叠加当一个元素包含在另一个元素中时，若父元素的边框和填充为0，此时父元素和子元素的margin挨在一起，那么父元素的上下margin也会和子元素的上下margin发生叠加。若父元素的边框或填充不为0，那么父元素和子元素的margin会被分隔开，因此不存在叠加的问题。经验：如果有盒子嵌套，要调整外面盒子和里面盒子之间的距离，一般用外面盒子的padding来调整，不要用里面盒子的margin，这样可以避免空白边叠加的现象出现嵌套盒子之间的margin嵌套盒子在标准流中的定位原则实验3——嵌套盒子之间的margin嵌套盒子在IE和Firefox中的不同显示当一个块元素包含在另一个块元素中时，若对父块设置高度，但父块的高度不足以容纳子块时，IE将使父块的高度自动伸展，达到能容纳子块的最小高度为止；而Firefox对父块和子块均以定义的高度为准，父块高度不会伸展，任其子块露在外面，子块高度也不会压缩。Firefox对元素的高度解释严格按照我们设定的高度执行，而IE对元素高度的设定有点自作主张的味道，它总是使标准流中子元素的盒子包含在父元素盒子当中。4.5背景的控制CSS的背景属性背景（background）是网页中常用的一种表现方法，无论是单纯的背景颜色还是背景图片，