【前端圭臬】五：CSS 核心机制——布局

前言

最近几周我一直在看 CSS 规范，下来感受就是，真·心乱如麻。也就是 CSS 是真的简单，真的，你说你 JS 巨佬，我膜拜，HTML 大师，我 respect，CSS 专家，呃，你是写规范的吗，出来咱俩比划比划，别怪我不讲武德。

对于 CSS 本身，真的可以做到战略上藐视。只要你对它的知识体系有一个逻辑合理且基本完备的认知，所有的问题都不过是技巧层面的。

当然，由于 CSS 如何起效、如何表现最后其实是浏览器说了算，因此单纯地从 CSS 语言角度出发是无法获得完整的应用知识的，这是后话，暂且不表，这篇文章我们主要来讲一讲布局方面的知识。

1 CSS 有哪些布局模式？

考虑到网页排版的（早期）需求，CSS2 规范中描述了 “视觉格式化模型” 。在这个模型中，文档树上的每个元素都基于 “盒子模型” 生成了 0 个或多个盒子，而这些盒子依据如下内容排版：

• 盒子的维度属性（dimensions，也就是宽高边距这些）和类型（type，由 display 属性决定）
• 位