一、盒子模型有哪些
1、标准盒子模型
标准W3C盒子模型的范围包括：margin、border、padding、content，并且content部分不包含其他部分。
2、IE盒子模型
IE盒子模型的范围也包括：margin、border、padding、content，但是和标准W3C盒子模型不同的是，IE盒子模型的content部分
包含了border和padding。
3、总结
标准盒子模型：margin、border、padding、content ,即 width = content
IE盒子模型：margin、content（border + padding + content），即 width = border+padding+content，所以内容区的实际宽度是width减去(border + padding)的值，大多数情况下，这使得我们更容易地设定一个元素的宽高。
注意：如果后三个相加超过width，以后三个相加后的宽度优先。
二、通过css如何转换盒子模型
box-sizing:content-box; //默认是标准盒子模型
box-sizing:border-box; //IE盒子模型
三、注意事项
- 如果是开发一个系统，
首先应该将box-sizing设置为border-box，这样会给你省不少页面问题 - 在一些特定的项目中，你可能需要使用IE盒子模型。比如，如果你的项目需要
兼容旧版IE浏览器（如IE8及以下），那么IE盒子模型可能是更好的选择。
