盒子模型的定义

盒子模型就是元素在网页中实际占据的大小。

盒子模型的组成

盒子模型由margin、border、padding、content四个部分组成。

盒子模型的计算方式

盒子模型的实际大小 = 内容的宽度或高度 + 内边距 + 边框。

内容的宽度和高度就是width和height，利用JS取到的是盒子模型的实际大小。

盒子模型的分类

盒子模型分为标准盒子模型和IE盒子模型（怪异盒子模型），IE盒子模型由CSS3新增。二者的区别在于设置width和height时对应的范围不同：标准盒子模型的width和height属性只包含了content，IE盒子模型的width和height属性包含了border、padding、content，因此border、padding不会撑大盒子。

如何改变元素的盒子模型

可以通过修改box-sizing属性来改变元素的盒子模型：

• box-sizing: content-box;
  表示标准盒子模型。
• box-sizing: border-box;
  表示IE盒子模型。
• box-sizing: inherit;
  从父元素继承。