关于CSS怪异盒子详细解剖

上一篇文章我们了解了盒子模型

盒子模型分为两种，一种是符合W3C规范的标准例子模型，另一种市IE的盒子模型，IE的盒子模型也被叫怪异盒子。

可以看到IE盒子模型也包括margin、border、padding、content，不过，和标准盒子模型不同的是：IE盒子模型的宽包含了border和padding。

怪异盒模型中的width指的是内容、边框、内边距总的宽度（content+border+padding）；height指的是内容、边框、内边距总的高度。padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即（Element width=width）。

我们可以通过属性Box-sizing来设置盒子模型的解析模式。

box-sizing属性允许你以“W3C的盒模型”或“IE盒模型”来定义元素，以适应区域。换句话说，当前元素使用哪种盒模型，可以由box-sizing属性来指定

它有两个值：

1.content-box（标准）

padding和border不被包含在width和height内，元素的实际大小为宽度+border+padding，此为标准模式下的盒模型。

标准模式：盒子总宽度/高度=内容区宽度/高度+padding+border+margin

2.border-box（怪异）

padding和border被包含在定义的width和height中，元素实际的大小为你定义了多宽就是多款。此属性为怪异模式下的盒模型。

怪异模式：盒子总宽度/高度=width/height+margin

这两种值的区别是什么呢？

标准模式会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定好，在将内容装入盒子。盒子的大小并不会被padding所撑开。

---

码字不易，且看且珍惜！