CSS 的排版本质：不是定位元素，是描述约束

很多人学 CSS 是"试出来的"——加 margin: auto 居中了，但不知道为什么。这是因为没想清楚 CSS 的排版本质。

问题从哪里来

传统排版（Word、InDesign）是绝对定位思维：这个元素在 (x, y) 位置，宽高是多少。

但 Web 的问题是：内容高度不确定，屏幕宽度不确定。绝对定位搞不定这事。

所以 CSS 选了一条完全不同的路：描述约束，让浏览器算。

normal flow 是什么

很多人叫它"文档流"，但英文名 normal flow 更本质——这是文本排版的延续。

CSS 最初就是为排版面设计的（Tim Berners-Lee 最初用 HTML 写物理论文），它的排版模型来自印刷业：

• 块级元素 = 段落（从上到下堆叠）
• 行内元素 = 文字（从做到右排列）
• margin 折叠 = 段落间距折叠（印刷排版惯例）

认知关键：CSS 不是在"定位盒子"，而是在排版文字。不想清楚这件事，float、position 永远用得心惊胆战。

Flex 解决什么问题

Flex 的本质是：一维方向上的「弹性分配」。

容器决定"我有一排空间，怎么分"；子元素决定"我要固定大小 / 我要按比例分剩下的 / 我随内容走"。

关键思维转变：你不是在"定位元素"，而是在"描述分配规则"。

这是为什么 Flex 的 API 设计是"容器上设规则，子元素上设偏好"——因为它是分配模型，不是定位模型。

Grid 又解决什么

Flex 是一维的（要么横，要么竖）。但实际排版是二维的。

Grid 的本质：把空间切成格子，把元素放进格子。

这和 Flex 的思维完全不同：

认知升华

回头看，CSS 排版教给我们的是：

不是所有布局问题都要「精确定位」。

很多时候，描述清楚"约束关系"，让渲染引擎帮你算，反而更健壮（内容变了不会崩）。

这和写代码的哲学一样：不要写死，要描述规则。

验证你有没有想清楚

三个问题：

1. justify-content: center 和 margin: auto 都能居中，它们分别适用于什么场景？为什么？
2. Grid 的 fr 单位和 Flex 的 flex-grow，本质区别是什么？
3. 为什么 CSS 的盒模型要设计成 content → padding → border → margin 这四层？

（答案同样不写在这里——去想清楚。）