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