掌握盒模型轻松DIV CSS网页布局

2019-03-14 19:49:15王冬梅

另一个常用的hack手法是使用!important(声明),声明加在CSS属性定义的后面,此条属性的级别将变成最高,即使后面有相同的定义也不会覆盖掉声明过的定义,不过IE不支持!important。
例如有如下css定义:
#box { border: 1px solid #B51C8C; width:768px; }
而其修正方法如图3所示。

图3 针对IE修正CSS
对于支持!important的浏览器,将接受width:768px,而ie6虽然不支持!important,但是由于其无法解释“ /**/(空注释)”,因此会忽略后面的定义,而ie 5.5却会接受最后定义的width:770px,因此达到修正的目的。
关于盒模型,还有以下几点需要注意:
・对于块级元素(display:block),未浮动的垂直相邻元素的上边界和下边界会被压缩,例如:有上下2个元素,上元素的下边界为5px,下面元素的上边界为20px,则实际2个元素的间距为20px(2个边界值中较大的值)。如图4所示。

图4 边界的压缩 注1. 块级元素(display: block)
每个块级元素都从一个新行开始,而且其后的元素也需另起一行开始,标题、段落、表格、层、body等都是块级元素。块级元素只能作为其他块级元素的子元素,而且需要一定的条件。
・内联元素,例如<a>、<span>等,定义上下边界不会影响到行高(line-height),内联元素距离上一行元素的距离由行高决定,而不是填充或边界。 注2. 内联元素(display: inline)
内联元素不需要在新行内显示,而且也不强迫其后的元素换行,如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。
・浮动元素(无论左或者右浮动)边界不压缩,且若浮动元素不声明宽度,则其宽度趋向于0,即压缩到其内容能承受的最小宽度。
・如果盒中没有内容,则即使定义了宽度和高度都为100%,实际上只占0%,因此不会被显示,此点在采取层布局的时候需特别注意。
・边界值可为负,其显示效果各浏览器可能不相同。
・填充值不可为负。
・边框默认的样式(border-style)为不显示(none)。