[转载] 介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

相关知识点

有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）

盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分

IE盒模型和W3C标准盒模型的区别：

• IE盒模型：属性width、height包含content、border和padding
• W3C标准盒模型：属性width、height只包含内容content，不包含border和padding

在IE8+浏览器中使用哪个盒模型可以由 box-sizing 控制，默认值为 content-box ，即标准盒模型；如果将 box-sizing 设为 border-box 则用的是IE盒模型。如果在IE6，7，8中 DOCTYPE 缺失会将盒子模型解释为IE盒子模型。若在页面中声明了 DOCTYPE 类型，所有的浏览器都会把盒模型解释为W3C盒模型。

回答

盒模型都是由四个部分组成的，分别是 margin、border、padding 和 content

标准盒模型和IE盒模型的区别在于设置 width和height时，所对应的范围不同。标准盒模型的width和height属性的范围只包含了content，而IE盒模型的width和height属性的范围包含了border、padding和content。

一般来说，我们可以通过修改元素的 box-sizing 属性来改变元素的盒模型。

详细资料还可参考：《CSS盒模型详解》

摘抄自：Github，作者：CavsZhouyou
链接：https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md