CSS盒模型的2个误区

翻看博客的时候发现关于CSS盒模型的解释有一些过时，希望在此更新纠正一下。

2种盒模型

首先CSS盒模型的确有两种：标准盒模型（W3C标准定义的盒模型）和怪异盒模型（IE模型）：

这里的“怪异盒模型（IE模型）”其实是国内的称呼，它来源于IE浏览器为了让一些只兼容IE 6以下版本的旧浏览器的页面能够被显示，而提供的“怪异模式“（Quirks mode）。而现大多页面都已经跟着W3C标准走了，怪异模式很少见，只有需要支持非常旧的页面的时候可以利用<DOCTYPE>标签来触发怪异模式（详情见MDN）。而我们看到的博客中经常使用的怪异盒模型则基本是指使用了box-sizing属性更改了盒子默认的height和width计算方式。实际上在MDN和W3C标准中并不能找到这样的称呼。

不止content-box, border-box

还有一点我发现通常在博客中只会提到content-box和border-box：

熟悉box-sizing属性的朋友应该知道content-box, border-box是它的两个值，并且浏览器默认是使用content-box的。

但实际上根据CSS标准的内容，盒模型的定义远远不止这两个盒子。

大致概括来说每个盒子有一块内容区域（content area），内容区域里是可以插入图片、文字、其他元素等。在内容区域外可以有填充（padding）区、边框（border）区、和边缘（margin）区，这些区域可有可无（即大小可以为0），其中margin比较特殊可以为负数。

为了说明这点，首先引入了边界（edge）的概念。说白了就是方盒子有4条边嘛，嵌套的盒子就要分清楚那条边到那条边涵盖在我们所指的“盒子”里。这有4种边界，也就是上图那4种不同颜色的方块或方框（标准里解释的特别废话。。。）：

1. content / inner edge
2. padding edge
3. border edge
4. margin / outer edge

基于这4种边界，也就产生了以下4个盒模型里的盒子：

1. content-box：上图白色的盒子，由width, height等属性或包含内容的大小来决定。
2. padding-box：上图红色的边框，由padding等属性或浏览器内置的一些设定来决定。
3. border-box：上图蓝色的边框，由border等属性或浏览器内置的一些设定来决定。
4. margin-box：上图绿色的边框，由margin等属性或浏览器内置的一些设定来决定。

另外在SVG中，还有3个名字不同但被当作以上其中之一对待的盒子：

1. fill-box：用来填充的区域，当作content-box处理。
2. stroke-box：描边的部分，当作border-box处理。
3. view-box：SVG内容可以显示的区域（想象一下类似截图的方块），当作border-box处理。

然后还可以继续深入展开关于padding, margin等定义的讨论。。。在此就不多说了。