盒模型

盒模型由内容 (content)、内边距(padding)、边框(border)、外边距(margin) 组成，其有两种标准：标准模型和 IE 模型。

由上图对比可看出区别在于元素的 box-sizing 的默认值不同：

1. 标准模型：默认 box-sizing: content-box。定义宽（width）高 (height) 等于盒子内容（content）的宽高。
2. IE 模型：默认 box-sizing: border-box. 定义的宽（width）高 (height) 等于内容 (content)+ 内边距(padding)+ 边框(border) 的总宽高

什么是盒模型

引用 MDN 官方的解释：

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box
model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。
每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective
edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content
edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

文字看起来有些苍白，我们举例说明（Talk is cheap，show me code）

定义一个样式：

.box {
    width: 100px;
    height: 100px;
    border: solid 1px #ddd;
    padding: 10px;
    margin: 10px;
}

应用样式

<div class="box"></div>

那么他的盒子模型是这样的（chrome 浏览器）：

这张图可以清晰的反应出来元素的内容尺寸、边框大小、内边距大小和外边距大小。这样就是理想的展现方式，也是符合我们的理解逻辑的：
盒模型 = 内容尺寸 + 内边距 + 边框尺寸 + 外边距（内边距、边框、外边距各个方向上需要计算 2 倍）
一切都是这么完美。但是，IE 来了 …

IE 的特殊盒子模型
我们以同样的样式和元素来作为例子，在 ie 浏览器中的盒子模型则有很大的不同

我们在样式中定义的尺寸很明显：width:100px;height:100px; 但是这里的内容尺寸则为 122 x 122；这个数字刚好是 内边距 (102) + 边框(12) 的和，所以 IE 的内容边界包括了内边距和边框。所以在 IE 中：
盒模型 = 内容（内容边界 + 内边距2+ 边框2）+ 外边距