Heluyao的博客 {11gz.com}

正常盒模型：

实际显示宽度 = 设置的width或height + 边框 + 填充

IE 5.x及更前的版本：

实际显示宽度 = 设置的width或height(边框和填充被包含在里面)

怪异模式的IE8以下版本将使用IE5的盒模型，这点很重要，要记清了！

　　盒子宽度未定义且是静态(没有浮动)或者相对定位的，宽度为100%，边框和填充会向内推动，而不是向外扩展。若明确设置宽度为100%，那么则相反。

　　绝对定位盒子，没设置宽度，宽度则跟随内容自动缩放，只受相对定位的外层元素的宽度影响而换行，切记body是一个相对定位的盒子。

　　浮动盒子，没设置宽度，与绝对定位的盒子相似。不同点是受外层元素的宽度影响而换行（该元素不需要设置相对定位）。

　　块级元素，上下边界会重合，以数值较大一方为基准。浮动的块级元素不会有此问题。块级元素不能为内联元素的子元素。

　　内联元素，行与行之间的距离不受边界和填充的影响。不过，内联元素也是盒子，也有边距、填充、边框，只是变现得有点“反常”。

　　边界值可为负，填充值不可为负。

　　下节准备补习：浏览器模式(怪癖模式、标准模式、准标准模式)

标签：boxmodel，CSS

这篇文章发表于2010年03月19日，下午，4:42，归类于html/css/xml/xsl。您可以通过订阅RSS 2.0跟踪对这篇文章的评论，也可以发表您的评论，或者从您的站点trackback。