第 3 章
HTML / CSS / 现代布局
不被框架包装的视觉与结构层——从语义、布局、现代 CSS 到中文排版
这一章讲用户最先看到的那一层——HTML 结构、CSS 样式、布局、动画。 它在浏览器里直接生效，不需要任何框架包装。
第 2 章把"框架不会变的下层"讲清楚了。这一章往上挪一层：像素如何被 排上屏幕、文字如何换行、布局如何在小屏不崩——这些是 React、Vue、 Svelte 共同依赖的视觉地基。
一段必要的史前史：CSS 是怎么"长成这样"的
如果你觉得 CSS 哪里别扭——比如选择器优先级总要数权重、margin 会 神奇折叠、
float的清除要靠"伪元素 hack"——那不是你的问题， 是这门语言本来就是从一片乱里收敛出来的。知道它的来路，下面这章 的很多设计就不再"反直觉"。
90 年代初的 Web 没有"样式表"这个东西。HTML 自己兼任表现职责——
<font color>、<center>、<bgcolor> 这种表现型标签直接写
进结构里，加上 Netscape 和 IE 各自塞的私有属性，整个网页是
"结构 / 样式 / 行为"全部糊在一起的一团泥。
1996 年 W3C 发布 CSS Level 1，把"怎么 显示"从 HTML 里拆了出来。这是 Web 史上最重要的一次分层——从此 HTML 管"是什么"，CSS 管"长什么样"，JS 管"做什么"。这套分工是现在 所有前端框架的根基。
但 CSS 走得很慢：
| 年份 | 节点 | 留下了什么 |
|---|---|---|
| 1996 | CSS 1 发布 | 选择器、字体、颜色、盒模型雏形 |
| 1998 | CSS 2 发布 | 定位（position）、float、媒体类型——之后十年没大动 |
| 1999-2009 | IE6 时代 | 浏览器实现互不一致，前端时间一半花在写 hack 上；jQuery 因此火了 |
| 2011 | Flexbox 草案 | 终于有了"主轴 / 交叉轴"心智 |
| 2017 | Flex / Grid 在主流浏览器全支持 | 现代布局元年——这是本章默认假设的浏览器基线 |
| 2020-2025 | State of CSS 历年报告 | 容器查询、:has()、原生嵌套、@layer、子网格、color-mix()、View Transitions ⋯ |
史料一手来源：W3C 各版规范是最权威的时间锚点；浏览器实际支持情况 看 Can I Use（按特性查"什么时候哪个浏览器 支持的"）；社区使用率看 State of CSS 历年问卷。想深入读 CSS 演进史可参考 Eric Meyer 的 CSS: The Definitive Guide （O'Reilly，每版都更新）。
两个结论值得记住：
- 2017 年是分水岭——之前的"前端写 CSS 经验"很大一部分是在 对抗浏览器差异；之后才真正回到"用 CSS 表达设计"。如果你在网上 看到 2017 年之前的 CSS 教程，先确认它讲的是不是现代写法
- CSS 不是"简单"，是"被简化呈现"——下表里的每一个机制都能写 一篇长文。它们不是冷知识，是你"为什么这个 div 不居中"的真正 答案：
| 中文术语 | 英文全称（缩写） | 一手参考 |
|---|---|---|
| 选择器优先级 | specificity | MDN |
| 层叠 | cascade | MDN |
| 继承 | inheritance | MDN |
| 包含块 | containing block | MDN |
| 堆叠上下文 | stacking context | MDN |
| 外边距折叠 | margin collapsing | MDN |
| 块级格式化上下文 | BFC = Block Formatting Context | MDN |
这一章和"我学过的 HTML / CSS"有什么不同
很多人以为 HTML / CSS 是"入门内容"，学过基础就够了。这是 2026 年 最容易踩的认知坑：CSS 在 2020-2025 年经历了一次结构性升级—— 上面表格里 2020 后那一行的每一项都改写了既往的"最佳实践"。
但这一章不会只讲新语法——那样和 MDN / web.dev 没区别。本章的目标 是带你看穿三件事：
- 现代写法的"前世"：每一个新特性（容器查询、
auto-fit、 subgrid、:has()）都在替换某个 2010 年代的 hack。讲清楚替换了 什么、为什么旧方案失败，你才会真正记住新方案 - "看似简单"下藏着的复杂面：margin 折叠、BFC、堆叠上下文、 包含块——业务里"为什么我的弹窗 z-index 9999 还是被盖住" "为什么父元素塌陷"全靠这些。本章会逐节点破，不藏
- AI 协作的边界：CSS 是 AI 输出最容易"看起来对实际错"的领域 之一。哪些任务直接交、哪些必须自己 review，每节都会标
写给已经写过几年前端的读者：如果你最近一次系统过 CSS 是 2020 年之前，这一章你需要重读。不是因为旧知识错了，是因为很多以前 必须靠 JS / 预处理器 / hack 解决的问题，现在 CSS 原生就能做—— 还在用旧办法的代码就是技术债。
写给新入行的读者：你是赶上了好时候。这一章里讲的几乎全部都是 "现代写法"——浮动布局、清除浮动、IE 兼容、CSS Hack、
@import嵌套技巧那一套完全不必学。 你直接学到现在还会用 5 年的写法。但不要因此轻视 CSS—— 上面史前史里那些"复杂面"（cascade / 堆叠上下文 / margin 折叠等） 是真正的实战障碍，本章会反复点回来。
3.1 本章六节速览
先看：这一章不必一次读完。下面六节加起来内容不少， 但真正每天写代码用得上的集中在每节前 1/3。这里先给两条路径：
路径 包含 大概时间 核心路径 §3.1 §1-2 + §3.5 选型一张表 + §3.6 transition 三件套 30-45 分钟 完整路径 全六节 + 复杂面 + DevTools 实战 5-8 小时（分多次读） 新人 / 转行者建议先走核心路径，写两个项目后再回来读完整版； 经验开发者可直接跳到自己卡的子节（如响应式、设计令牌）。本章 每节开头都标了"核心 / 进阶 / 按需"——不要被"必学"标签压垮， 判断什么时候读哪段才是手册的核心价值。
| # | 节 | 一句话定位 | 谁最该读 |
|---|---|---|---|
| 3.1 | 现代布局 | Flex / Grid / 容器查询 / 子网格——99% 的页面布局靠这套 | 所有人 |
| 3.2 | 语义化 HTML 与可访问性 | <button> 不是 <div onclick>——让屏幕阅读器和搜索引擎都能读懂 | 所有人 |
| 3.3 | 现代 CSS 特性 | @layer / :has() / 嵌套 / 变量 / color-mix() | 所有人 |
| 3.4 | 响应式与中文 Web | 移动优先、CJK 排版、暗色模式——三件常被忽略的设计基础 | 所有人 |
| 3.5 | 样式方案选型与样式系统 | Tailwind / CSS Modules / CSS-in-JS / 无头组件 / shadcn / 设计令牌——选什么、配什么、为什么 | 所有人 |
| 3.6 | 动画与 View Transitions | 浏览器原生路由切换 / 状态切换动画 | 所有人，资深尤其 |
标「所有人」不等于"一次读完"——上面的核心路径已经覆盖业务里最高频 的 80%。§3.5 样式方案选型是从"能写出像样的页面"到"能在团队 / 真实项目里写下去"的关键一跳——选错样式方案的代价上线半年才显现。
「待写」 的章节会按推荐顺序逐节上线。本章六节全部已上线： §3.1 现代布局、§3.2 语义化 HTML 与可访问性、§3.3 现代 CSS 特性、 §3.4 响应式与中文 Web、§3.5 样式方案选型与样式系统、§3.6 动画与 View Transitions。前两节是布局判断 + 语义判断的代码地基，§3.3 把 语言层补到 2024 基线，§3.4 补全多视口 + 多语言 + 多偏好的现代响应式 全貌，§3.5 给出从"能写"到"能在团队 / 真实项目里写下去"的判断地图， §3.6 把状态切换的连续性表达讲清——六节合起来基本能扛住业务里 95% 的 HTML / CSS 任务。
主流样式方案在本章哪里出现
CSS 一旦写到真实项目就绕不开"用什么方案组织样式"。本章不另设 "方案对比"专章，而是在几个不同节里从不同视角点破——读完整章 你会有一张完整的判断地图：
| 方案 / 工具 | 类型 | 主要出现节 |
|---|---|---|
| 原生 CSS / CSS Modules | 写法层 | §3.3 现代 CSS 特性（嵌套、@layer、变量） |
| Tailwind CSS | 原子化样式 | §3.5 样式方案选型（含 AI 协作适配性） |
| CSS-in-JS（styled-components / Emotion） | 运行时样式 | §3.5 选型 + 第 5 章 React 集成 |
| Sass / Less | 预处理器 | §3.2 三档归位（标"可委托"）+ §3.5 何时还有用 |
| 无头组件（Radix UI / Headless UI） | 行为 + a11y | §3.2 a11y + §3.5 选型 |
| shadcn/ui | 复制粘贴范式 | §3.5 选型（重点：为什么不算传统组件库） |
| 完整组件库（Ant Design / Element Plus） | 设计系统打包 | §3.5 选型（中后台高频选择） |
| 设计令牌（design tokens） | 跨方案的根 | §3.5 整节核心 + §3.4 暗色模式 |
第 5 章会从 React 视角再讲一遍——服务端组件 / 客户端组件对 CSS-in-JS 的影响、Tailwind 在 RSC 里的优势、shadcn 在 Next.js 里 的标准接法。本章 §3.5 讲语言层取舍，第 5 章讲框架层集成—— 两边视角不同，不重复。
实战复杂面：贯穿全章的"翻车之王"
下面这些机制不是某一节的主题，而是业务里出错频率最高的那批 CSS 概念——会在多节反复出现，本章每次提到时都会回链回来。 缩写都给出英文全称 + MDN 一手链接，遇到就点进去查：
| 机制 | 一句话含义 | 你最常在哪里栽 | 主要展开节点 |
|---|---|---|---|
| 层叠 + 优先级（cascade + specificity） | 多条规则冲突时谁赢 | "为什么我加了样式没生效" | §3.3 现代 CSS |
| 包含块（containing block） | 一个元素的尺寸 / 定位以谁为参照 | position: absolute 跑飞了 | §3.1 + §3.3 |
| 堆叠上下文（stacking context） | z 轴上的"独立宇宙" | "z-index 9999 还是被盖" | §3.6 动画与层级 |
| 外边距折叠（margin collapsing） | 相邻块级元素 margin 会合并 | 父子之间多了 / 少了空白 | §3.1 |
| BFC（Block Formatting Context，块级格式化上下文） | 一种"自成一体"的布局区域 | 父元素塌陷、清除浮动 | §3.1 |
| 盒模型（box model / box-sizing） | width 包不包含 padding / border | 元素总比预期"宽一点" | §3.1 |
| 继承（inheritance） | 哪些属性会从父元素自动继承 | 字体 / 颜色为啥变了 | §3.3 |
对新人的建议：先把 §3.1 / §3.3 顺读下来，遇到上表词条卡壳就 停下查；等你能说出"这是堆叠上下文的问题"，CSS 才算真正入门。
3.2 本章三档归位
| 知识点 | 归位 | 理由 |
|---|---|---|
| Flexbox 主轴 / 交叉轴心智 | 必学 | 90% 的"水平 / 垂直居中""平均分布"靠这个 |
Grid 显式 / 隐式轨道、grid-template-areas | 必学 | 整页布局、卡片网格的现代答案 |
| 容器查询（container queries） | 必学 | 组件按"自身宽度"响应——比媒体查询贴近组件化时代 |
| 子网格（subgrid） | 仍需理解 | 复杂表格 / 卡片对齐时是利器；不会每天用 |
| 媒体查询 + 移动优先 | 必学 | 响应式的入门项，必须会写 |
语义化 HTML（<header> / <nav> 等） | 必学 | a11y 和 SEO 的地基——AI 写出来的 <div> 套娃要你 review |
| ARIA 属性 | 仍需理解 | 知道何时该用 role / aria-label；具体 attribute 让 AI 写 + review |
:has() / :is() / :where() | 必学 | 写组件库 / 状态切换时大幅减少 JS |
@layer 与样式分层 | 必学 | 团队项目防 specificity 大战的现代答案 |
| CSS 嵌套（原生） | 仍需理解 | 知道语法 + 知道与 SCSS 的差异；具体写法 AI 写得熟 |
color-mix() / oklch() / 相对颜色 | 仍需理解 | 暗色模式 / 设计令牌生成会用；记住存在即可 |
| Tailwind CSS 心智 + 配置 | 必学 | 2024 后业界最广用的样式方案；AI 协作的事实标准 |
| CSS Modules 与原生 CSS 组件化 | 必学 | Next.js / Vite 默认开箱方案；不用 Tailwind 的项目里几乎全在用 |
| CSS-in-JS（styled-components / Emotion） | 仍需理解 | 仍存在但份额下滑；服务端组件场景受限——选型时要知道为什么 |
| 无头组件（Radix UI / Headless UI / Ark） | 必学 | 提供行为 + a11y 不带样式；和 Tailwind / shadcn 的天然搭档 |
| shadcn/ui 范式 | 必学 | "复制粘贴而非依赖"——AI 时代最适配的组件分发方式 |
| 完整组件库（Ant Design / Element Plus / Material UI） | 仍需理解 | 中后台高频选择；知道何时用、何时被无头组件替代 |
| 设计令牌（design tokens） | 必学 | 跨方案的根；命名 / 分层 / 主题切换全靠它 |
动画三件套：transition / animation / @keyframes | 必学 | 微交互的基础 |
View Transitions API | 仍需理解 | 跨页面动画是 2025 后路由动效的现代答案 |
| CSS 预处理器（Sass / Less）详尽语法 | 可委托 | 现代项目用原生嵌套 + 变量已够；遗留项目让 AI 写 |
| 浮动布局 / 清除浮动 / IE Hack | 不学 | 已被 Flex / Grid 全面替代；见 §3.1 简史 |
三档 vs 四 Tier 视角差：上表是知识档（必学 / 仍需理解 / 可委托），第 1 章 §1.4 的 Tier 1-4 是任务档——同一个知识点写不同任务可能落在不同 Tier。 例：「Grid」是必学知识，但"写一段 Grid 居中"是 Tier 1 任务、 "重构整个页面布局"是 Tier 3 任务。
3.3 怎么读这一章
别脱离实时预览读
CSS 与第 2 章的"协议 / 渲染 / 安全"不同——它改一行代码就能立刻在 屏幕上看到结果。所以这一章的读法是：
- 打开 CodePen / CSS Playground 或本地任何 HTML 文件
- 一边读一边把例子敲进去
- 改一两个值看看变化（
gap: 1rem改成2rem、grid-template-columns改列数）
只读不写——基本等于没读。
AI 的位置
| 你想做 | AI 帮得上吗 |
|---|---|
| 写一段 Flex / Grid 居中 | ✅ 现代 AI 写得熟 |
| 把"圣杯布局" / "三栏自适应"翻译成 Grid | ✅ 直接给 |
| 选 Flex 还是 Grid | ⚠️ 心智模型必须在你脑子里，AI 给的是默认答案 |
| 写 a11y 属性（ARIA） | ✅ 但你必须读懂——错配的 ARIA 比没有更糟 |
| 设计响应式断点 | ❌ 业务上下文 AI 拿不到，让它列方案、你拍板 |
| 设计设计令牌（颜色 / 字号 / 间距体系） | ❌ 这是产品 / 视觉决策，不是技术决策 |
3.4 设计判断暗线
本章贯穿几条核心设计判断，会在以下位置点破：
- §3.1 现代布局：声明式（declarative）vs 命令式（imperative）——
display: grid是"我要什么"，旧式 JS 算坐标是"怎么做"；声明式让浏览器 做调度，AI 也写得更稳 - §3.3 @layer：分层控制（layered specificity）——
@layer reset, base, components, utilities把样式优先级从"谁的选择器更长"改成"谁在哪一层"， 消除大型项目里"不停叠!important"的恶性循环 - §3.5 样式方案选型：信息隐藏（information hiding）+ 抽象代价——
设计令牌把"#3b82f6"藏到
--color-primary后面、Tailwind 把"flex items-center"压成一组共享词汇、shadcn 把"组件代码"放回项目内而非 锁进依赖。每一层抽象都在藏某些细节、暴露某些接口；选错抽 象层就是后续技术债的根 - §3.6 View Transitions：声明式动画（declarative animation）—— 浏览器接管"前后状态差异 → 平滑过渡"的调度，告别旧式手写 FLIP 计算
3.5 读完本章你应该能
- 看到一个布局需求，能口头说出该用 Flex 还是 Grid，理由是什么
- 写出一段 Grid 自适应卡片网格（列数随容器宽度变化），不查文档
- 看到
:has(.error)知道这是"父选子" - 区分媒体查询（按视口）和容器查询（按容器自身宽度），知道何时 用哪个
- 看到一段
<div onclick>能识别这是 a11y 反例 - 知道
@layer的作用，能讲出"为什么不用就会陷入!important互砍" - 看到设计令牌定义（
--color-primary等）能解释为什么这样组织 - 能说出 Tailwind 和 CSS Modules 各自适合什么项目，理由不止"我习惯用"
- 知道无头组件（Radix / Headless UI）和完整组件库（Ant Design） 的边界，新项目能选对
- 能讲出 shadcn/ui 为什么不算"传统组件库"——以及为什么 AI 时代 它特别合适
- 知道
View Transitions是什么，能在合适场景提议用它
复杂面专项（卡过这几关，CSS 才算真正会写）：
- 听到"margin 折叠"能说出在什么场景出现 + 怎么避免
- 听到"堆叠上下文"能解释为什么
z-index: 9999也可能被盖住 - 看到
position: absolute跑到屏幕角落，知道去找"包含块" - 区分
box-sizing: content-box和border-box，能说出现代项目 默认用哪个
延伸阅读
- MDN: HTML 元素参考 — HTML 标签百科；中文版
- MDN: CSS — CSS 规范的中文索引页
- web.dev: Learn CSS （英文） — Google 主导的现代 CSS 教程，按主题组织、含交互例子
- CSS-Tricks: A Complete Guide to Flexbox （英文） + Grid 同系列 — 社区事实标准的 Flex / Grid 速查
- State of CSS 2024 — CSS 社区年度调查，看"最近大家在用什么 / 想用什么"
访问性说明：MDN 中文版 + State of CSS 中文版可直接访问； CSS-Tricks / web.dev 英文站偶有访问波动，但绝大多数 ISP 可达。
下一节：§3.1 现代布局 —— Flex、Grid、容器查询、子网格。