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

2020-05-10 13:30:02易采站长站整理

是CSS2.0中的语音属性,由于Windows IE5.5不完全支持CSS2.0,不识别此属性,因此跳到下一个选择符。但是其他浏览器(包括IE6)会继续解读下面的定义,由于css是“层叠”的,即对于同一个选择符的相同的属性,后面的定义会覆盖掉前面的定义,因此,对于其他的浏览器,#menu的宽度为最后的100px。

另一个常用的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)。