众所周知,盒模型是CSS3中非常重要的一个概念。盒模型的组成包含content、padding、border、margin,
盒模型分为两种,标准盒模型和IE盒模型,这两种模型的主要区别在于宽高的计算上。标准盒模型也即w3c盒模型,其规定盒模型的高度即为content区域的高度,不包含padding、border;而IE盒模型的高度为content区域的高度+padding高度+border高度。
在CSS3中,用户可指定元素宽高的计算方法,对应的属性为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时,其结果为:
从图中可以看出height值即为content区域的高度值,并不包含padding和border。当box-sizing的值为border-box时,其结果为:
从图中可以看出,当box-sizing值为border-box时,height值content的高度值+padding-top值+padding-bottom值+border-top值+border-bottom值