CSS世界中的margin-box

一、前言

聊聊技术吧，这个纯粹。

本文内容偏理论，非实用技术，对于深入理解CSS的一些概念和设计很有帮助。本文有些概念如果你不知道说的是什么意思，比方说“盒尺寸”，你大可忽略之，并不影响对本文核心观点的理解。这些概念是需要很多积累，而且属于一个完整体系里面的，所谓体系，就是从前往后是连贯下来的，而盒尺寸这个概念处于体系的中间，直接讲盒尺寸就像看电影直接从中间部分看起，肯定会有些困惑，但由于本来就是让大家看电影精华片段的，因此，无碍。

二、盒尺寸(Box dimensions)的4个盒子

盒尺寸由4个盒子组成，分别是content box, padding box, border box, margin box。这个和盒模型中的几个盒子其实是对应的。

这是他们在规范中的称呼，当规范落地到CSS语言层的时候，每个盒子都起了一个对应的名字，如下：

content box写做content-box；