网页设计盒子.doc

盒子模型-border
所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容往往都要比单纯的内容要大。换句话说,可以通过调整盒子的边框和距离等参数,来调节盒子的位置。
一个盒子模型由content(内容)、border(边框)、padding(间隙)和margin(间隔)这4个部分组成。
一个盒子的实际宽度(或高度)是由content padding border margin组成的。在CSS中可以通过设定width和height的值来控制content的大小,并且对于任何一个盒子,都可以分别设定4条边各自的的border、padding和margin。因此只要利用好盒子的这些属性,就能够实现各种各样的排版效果。
border一般用于分离元素,border的外围即为元素的最外围,因此计算元素实际的宽和高时,就要将border纳入。换句话说,border会占据空间,所以在计算精细的版面时,一定要把border的影响考虑进去。
border的属性主要有3个,分别是color(颜色)、width(粗细)和style(样式)。在设置border时常常需要将这3个属性进行很好的配合,才能达到良好的效果。
color指定border的颜色,它的设置方式与文字的color属性完全一样。
width即border的粗细程度,可以设为thin、medium、thick和,其中表示具体的数值,例如5px。width的默认值为“medium”,一般的浏览器都将其解析为2px宽。
这里需要重点讲解的是style属性,它可以设为none、hidden、dashed、solid、double、groove、ridge、inset和outset等,其中none和hidden都是不显示border,二者效果完全相同,只是运用在表格中时,hidden可以用来解决边框冲突的问题。
(经验之谈:对于IE浏览器不支持border-style效果,在实际制作网页的时候,不推荐使用。)
另外值得注意的是,在特定情况下给元素设置background-color背景色时,IE作用的区域为content padding,而Firefox则是content padding border。这点在border为粗虚线时特别明显。
padding用于控制content与border之间的距离。
(技术背景:在浏览器中如果使用width或是height属性指定了父块的宽或高,由于width和height的值中包含padding,那么内容元素content会受到padding的挤压,在网页设计中,也可以利用这一点实现许多效果,其实padding属性的概念就这么简单,但在CSS中排版与margin配合使用,就能使页面千变万化。)
当某些时候需要同时设置4个方向的padding值时,可以将4个语句合成到一起,用padding语句统一书写。
margin指的是元素与元素之间的距离。
从直观上而言,margin用于控制块与块之间的距离。倘若将盒子模型比作展览馆里展出的一幅幅画,那么content就是画画本身,padding就是画画与画框之间的留白,border就是画框,而margin就是画与画之间的距离。
当