css盒模型

什么是盒模型

引用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;
}

应用样式

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

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

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

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