CSS盒模型小结

对盒模型简单作下总结和分享。

一、概念

当浏览器对文档进行布局时，渲染引擎将全部元素表现为一个个矩形的盒子，称为盒模型。

如图，咱们用chrome调试时看到的就是每一个元素对应的盒模型示例图，盒模型从外到内包括margin-box,border-box,padding-box和content-box。

二、标准盒模型和怪异盒模型(IE盒模型)

标准盒模型和怪异盒模型的区别是整个盒子的宽高决定方式的不一样，可经过设置css属性box-sizing为content-box和border-box分别将盒子设置为标准盒模型和怪异盒模型。

三、哈?show me the code?

<style> div{ width:100px; height:50px; padding:5px; border:5px solid black; margin:5px; } .normal{ background: red; } .strange{ background: green; box-sizing: border-box; } </style>
<div class="normal">
    标准盒模型
</div>
<div class="strange">
    怪异盒模型
</div>
复制代码

标准盒模型

怪异盒模型

如上，盒子相关设置值相同， 标准盒模型盒子的宽度为： margin+border+padding+content 怪异盒模型盒子的宽度为： css设置的width值 从而致使二者所占区域不一样

四、默认设置

除IE外，浏览器默认使用标准盒模式解析元素，其也是W3C的标准。恼人的IE5.5及更早IE浏览器默认使用怪异模式解析元素，因此怪异模式也称IE模式。

五、做用

笔者经验有限，使用较多的状况是将某个元素宽度控制在特定值时，设置box-sizing为border-box，有其余经常使用案例欢迎你们留言讨论。