关于盒模型存在两种形式,分别是W3C标准盒模型和IE盒模型,如下图所示,其区别主要在于宽度和高度的计算方式,CSS3对盒模型做出了新的定义,即允许开发人员指定盒子宽度和高度的计算方式。
IE模型下width = padding + content + border;
W3C盒模型下 width = content
box-sizing: border-box width = border + padding + content
box-sizing: content-box width = content
IE盒模型只会出现在IE5版本和IE6+的怪异模式中。
怪异模式
http://www.cnblogs.com/coco1s/p/4034937.html
CSS3中可以通过box-sizing来指定盒模型,即可指定为content-box、border-box;
box-sizing属性用于改变容器的盒模型组成方式
1content-box: 此值维持css2.1盒模型的组成模式,border|padding|content {element width=border+padding+content}
2border-box: 此值改变css2.1盒模型组成模式,content|border|padding {element width=content}
-webkit-box-direction