CSS的发展与原理解析

历史背景：从“一维流”到“二维网格” Flex 的出现（2009 年左右，W3C 最终定稿于 2017）彻底改变了布局方式，它解决了“盒子之间的空间分配”这一长期痛点——能自动伸缩、自动对齐

CSS 的“空间分配模型”：理想与现实的冲突 在传统 BFC（块级格式化上下文）布局中，浏览器是这样理解一个盒子的： 举例： 浏览器布局逻辑： 浏览器先为 .box 分配好 200px 的“理想矩

为什么会出现 Flex？（问题的起点） 旧时代的布局困境 在 Flex 出现之前，开发者依赖以下方式进行布局： 布局方式 核心思路 问题 普通文档流 块级元素垂直排列，行内元素水平排列 只能

我们之前讲的： 文档流 → 格式化上下文 → 包含块 → 层叠上下文 这几层都是“逻辑层面的排版规则”，属于 Layout（布局阶段）。 而在前面我们在讲fixed和transform时遇到了其他的概

浮动（float）与定位（position）都是“对文档流的干预机制”，它们的出现正是因为早期 Web 页面仅靠文档流无法完成复杂的布局需求。 问题背景：文档流的局限 起点：原始的“自然流布局” 最早

理解 文档流（Document Flow） 是 CSS 排版的“血液循环系统”， 而 盒模型（Box Model），则是这个体系中每一个“细胞”的基本结构单位。 ——CSS 世界的一切，最终都以“盒（

现在进入 CSS 的核心底层——“文档流（Normal Flow）”。 如果我们把 CSS 比喻为“排版的语言”， 那么“文档流”就是它的语法基石、世界物理法则。 理解它，就能明白 CSS 世界中一切

这部分内容，是整个 CSS 的灵魂所在，因为所有“视觉、动画、响应式”等后续能力，都建立在“排版布局”这个空间规则之上。 排版，就是“空间秩序”的科学。 起点：HTML 诞生之初，人们遇到的第一个痛点

初学CSS的同学，容易被其大量的属性与规则所左右，难以记忆的同时，还要去理解各种奇异效果的原理，如响应式与复杂动画等等，属实让人困惑。 其实，这正是很多人学习 CSS 时的最大陷阱——一开始就被“海量