css3盒模型

一、css3盒模型

关于盒模型存在两种形式，分别是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属性用于改变容器的盒模型组成方式
1 content-box: 此值维持css2.1盒模型的组成模式，border|padding|content {element width=border+padding+content}
2 border-box: 此值改变css2.1盒模型组成模式，content|border|padding {element width=content}
-webkit-box-direction