盒模型总结

众所周知，盒模型是CSS3中非常重要的一个概念。盒模型的组成包含content、padding、border、margin，

盒模型示意图

盒模型分为两种，标准盒模型和IE盒模型，这两种模型的主要区别在于宽高的计算上。标准盒模型也即w3c盒模型，其规定盒模型的高度即为content区域的高度，不包含padding、border；而IE盒模型的高度为content区域的高度+padding高度+border高度。

标准盒模型 IE盒模型

在CSS3中，用户可指定元素宽高的计算方法，对应的属性为box-sizing。浏览器对box-sizing的支持情况如下图所示：

box-sizing的支持情况

其语法为：

box-sizing: content-box|border-box|inherit；默认值为content-box。

content-box对应着标准盒模型，即元素的height属性值即为content的高度值，不包换padding和border的高度；

border-box对应着IE盒模型，即元素height属性值为content+padding+border的高度和；

代码.box-sizing{width:100px;height:200px;padding:20px;border:2px solid#11ab3a;}在box-sizing的值为content-box时，其结果为：

box-sizing值为content-box时

从图中可以看出height值即为content区域的高度值，并不包含padding和border。当box-sizing的值为border-box时，其结果为：

box-sizing值为border-box时

从图中可以看出，当box-sizing值为border-box时，height值content的高度值+padding-top值+padding-bottom值+border-top值+border-bottom值