CSS教程:盒模型(BOX Model)
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-03-05
| :110px，是IE 5.5认为的元素的宽度，100px+5px+5px。 voice-family: "\"}\""; voice-family: inherit; 是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%，因此不会被显 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
上一篇: CSS样式表定义标签li前面样式下一篇: DIV+CSS常见错误汇总
关于CSS教程:盒模型(BOX Model)的所有评论
