IE 盒模型和W3C盒模型

1. W3C盒模型

标准盒模型

w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分。

2. IE盒模型

IE盒子模型

IE盒子模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content部分包含了padding和border。

IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准。我们说这是一个好消息因为这意味着此盒模型问题只会出现在IE5.5及其更早的版本中。只要为文档设置一个DOCTYPE，就会使得IE遵循标准兼容模式的方式工作。

3. box-sizing

css3的box-sizing属性可以设置盒模型解析方式。W3C的盒模型方式被称为“content-box”，IE的被称为“border-box”，使用box-sizing: border-box;就是为了在设置有padding值和border值的时候不把宽度撑开。

box-sizing ： content-box || border-box || inherit

- content-box : 让元素采用标准的W3C盒模型。
- border-box：让元素采用IE盒模型。
- inherit：让元素继承父元素的`box-sizing`属性