本文主要是介绍标准盒模型和怪异盒模型的区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
CSS盒模型：
- 内容区（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
分为标准盒模型和IE盒模型/怪异盒模型
为了正确设置元素在所有浏览器中的宽度和高度，需要了解盒模型是如何工作的。
重点：
| 种类 | 总宽度 |
|---|---|
| 标注盒模型 | 标准模式下，一个元素所占据的总宽度=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right，高度同理。 |
| IE盒模型/怪异盒模型 | 在怪异模式下，一个块元素所占据的总宽度=margin-left+width+margin-right（即 width 已经包含了 padding 和 border），高度同理。 |
可以使用 box-sizing 属性来控制使用哪种盒模型。
box-sizing:content-box 是 W3C 盒子模型。
box-sizing:border-box 是 IE 盒子模型/怪异盒模型。
这篇关于标准盒模型和怪异盒模型的区别的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
