第3章 HTML与CSS表现层
第3章 HTML与CSS表现层
章节摘要：HTML 回答"这里有什么"，CSS 回答"它长什么样"。本章讲两层如何协作：样式挂载到文档的三条通道与优先级体系，选择器如何沿文档树锚定元素，常用属性与盒模型、弹性布局如何把结构变成版面。读完本章，你能解释任何一行样式"为什么生效或不生效"。
学习目标
阅读完本章，你应当能够：
- 说出样式进入页面的三条通道及其优先级关系；
- 计算一段选择器的特异性，判断样式冲突时的胜者；
- 熟练使用元素、类、后代、子代、伪类选择器；
- 解释盒模型的组成与 box-sizing 的两种算法；
- 用弹性布局实现常见的一维排列与两栏自适应版面；
- 组织一份可维护的样式结构，而不是零散补丁。
核心概念速览
本章的主线是"结构到外观的传送带"：文档树先被选择器定位，样式规则再经层叠与继承落到每个元素，最后由盒模型与布局引擎排成版面。
CSS 的全部疑难杂症，八成能归结为两个词：层叠与盒模型。这两个词弄透，调试样式就从玄学变成推理。
子章节导航
3.1 HTML 和 CSS 的关系
两条协作通道：内联、内嵌、外链三种挂载方式与各自的位置；层叠、继承、特异性三大机制如何裁决"同一个元素听谁的"；结构与表现分离这条原则的工程含义。
3.2 CSS 选择器
选择器是样式与文档的接口。从元素、类、id 三大基础出发，讲组合选择器（后代、子代、相邻）、伪类（状态与结构）、属性选择器，最后给特异性速算方法与选择器的性能常识。
3.3 常用 CSS 属性与布局
颜色字体等基础属性点到即止，重心放在盒模型（两种算法的差异）与弹性布局（主轴交叉轴心智模型、常见版面的三五条声明解法），收尾于响应式的媒体查询入门。
子章节之间的逻辑关系
三节是一条流水线：3.1 立"样式怎么挂上去、冲突怎么裁决"的总框架；3.2 讲框架里的定位环节——没有选择器，规则无处附着；3.3 讲挂上之后的执行环节——属性与布局引擎如何把声明变成像素。框图：
3.1 挂载与裁决（层叠·继承·优先级） │ 规则要落到元素上 ▼ 3.2 选择器（文档树上的锚点） │ 元素被选中之后 ▼ 3.3 属性与布局（盒模型 → 版面）
前置知识与后续延伸
- 前置：第 2 章的语义骨架。选择器的一切操作都发生在文档树上，结构越语义化，选择器越简单；本章会多次演示"好结构省一半样式代码"。
- 为后续铺垫：第 4 章讲可访问性时，"别用 CSS 隐藏掉可聚焦元素""对比度不达标"都是样式问题；第 5 章性能优化里，样式表的加载顺序、渲染阻塞是核心议题；综合实战一章将直接使用本章的布局工具搭建完整版面。学好本章，第 4 章的验收与第 5 章的优化才有抓手。
给初学者一个心法：调试 CSS 时永远问三个问题——规则选中这个元素了吗（选择器）、选中后被打败了吗（层叠）、继承来的值是什么（继承）。三问按序排查，比随手改试快十倍。开发者工具的元素面板能同时回答这三问，本章各节都会教你怎么用。
CSS 为什么长成这样
初学 CSS 的人常有共同的挫败感：为什么居中一个元素这么费劲？为什么改这里坏那里？这些挫败大多来自对 CSS 设计哲学的错位期待。CSS 不是"画布式"的排版系统（指定每个元素的绝对坐标），而是约束求解式的：你声明意图（这两栏等宽、这段文字居中、这个导航吸顶），布局引擎在文档流、盒模型、可用空间等约束下自动求出每个盒子的位置。这套哲学的优势是流式适配——同一份声明在手机与宽屏上各自成立，这正是 Web"一次编写处处可读"的根基；代价是你必须理解约束体系的规则，而不是期望"我说了算"。
理解了这层哲学，本章的内容顺序就有了逻辑：先懂挂载与裁决（规则如何进入系统、冲突如何解决），再懂寻址（规则如何附着到元素），最后懂布局引擎的约束模型（盒子如何计算与排队）。三章学完再看那些"CSS 技巧集锦"，你会发现绝大多数技巧不过是这三层规则的自然推论——这也是本册"概念筑基"主调在表现层的延续：语法层提供零件（第 1 章），结构层提供装配规则（第 2 章），本章提供外观协议，第 4 章提供验收标准。
另外给一个务实的提醒：CSS 的知识量里有一半是"历史兼容位"——为旧时代问题发明的技巧（边距折叠的规避、行内空隙、边距社交学），在现代特性（gap、弹性布局、网格）下已经不需要学。本章刻意跳过大部分历史技巧，直接教现代写法；你在旧项目里遇到它们时，回头查本章的"高频疑问"即可，不必预支学习成本。这一点也与第 1 章讲标准演进时的观察一致：平台每接管一类通用需求，应用层的旧技巧就整批过时。