W3C 标准盒模型和 IE 模型

CSS 中有两种盒模型，分别是 IE 盒模型 和 W3C 标准盒模型。

从上图可以看到标准 W3C 盒模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒模型不同的是：IE 盒模型的 content 部分包含了 border 和 pading。

W3C 标准盒模型

元素空间占据空间大小
元素空间高度 ＝ height ＋ padding-top ＋ padding-bottom ＋ border-top + border-bottom + margin-top  + margin-bottom
元素空间宽度 ＝ width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

内盒尺寸计算（元素大小）
元素高度 ＝ height ＋ padding-top ＋ padding-bottom ＋ border-top + border-bottom
元素宽度 ＝ width ＋ padding-left ＋ padding-right + border-left + border-right

IE 模型

元素空间占据空间大小
元素空间高度 ＝ height ＋ padding-top ＋ padding-bottom ＋ border-top + border-bottom(height 包含了 padding, border)
元素空间宽度 ＝ width ＋ padding-left ＋ padding-right + border-left + border-right(width包含了 padding, border)

内盒尺寸计算（元素大小）
元素高度＝height(height包含了padding,border)
元素宽度＝width(width包含了padding,border)

我们平常使用的大都是 W3C 标准盒模型