CSS Reference Guide — 全书拆解¶
30 秒导读: 这是一本 2026 年出版的现代 CSS 速查手册,约 11.5 万字符,24 章加一份术语表。 它回答的问题不是「CSS 为什么这么设计」,而是「CSS 有哪些部件、每个部件怎么用、默认值是什么、最容易怎么错」。 每一章都按同一个模板写:先概述,再讲核心概念,然后逐个属性给出写法、可选值、小例子、效果说明, 最后附常见用法和常见错误1——所以它更像一张标好坑的地图,而不是一条论证链。 本组文档把它重写成 15 章中文拆解,读完不必看原书。 具体写法忘了的时候,查原书第 24 章——那张属性索引按字母排好了。
1. 这是谁在什么时候写的¶
| 作者 | Prashant Mondkar——公开资料极少,查不到其背景与履历 |
| 成书时间 | 2026 年 2 月(epub 元数据,即内嵌在电子书文件里的出版信息,记录的上架日期);Amazon 在售,ISBN 9798246899724,无出版社信息,属自出版型参考书2 |
| 定位 | 副题「A Complete, Quick-Lookup Guide to Modern CSS」——完整的现代 CSS 快速查阅指南 |
| 篇幅 | 24 章 + 术语表,约 11.5 万字符;正文以英文写成 |
两件事读之前要交代:
第一,它的深度止于「写法 + 默认值 + 一个例子 + 常见错误」。 几乎每个特性都只有一页:给写法、列取值、贴一小段代码、解释输出、列两三条坑。想要浏览器为什么这样实现、规范怎么演进、性能怎么衡量,这本里都没有(第 5 节有不覆盖清单)。
第二,成书很新(2026 年 2 月),但也因此漏掉了同一年正在标准化的东西。 结尾致谢页自己点名了三个「正在加入标准」的新特性:容器查询(Container Queries)、视图过渡(View Transitions)、锚点定位(Anchor Positioning)——正文一概没讲3。把它当「2026 年上半年的现代 CSS」读,口径正好。
2. 全书一条主线(读完这一节,你就懂了这本书)¶
参考书的「主线」不是论证链,而是任何一个样式问题在书里走的同一条决策路径。 这条路径从第 1 章走到第 23 章,一步逼出下一步:
① 先写得出来:规则与三种写法(第 1 章)¶
CSS 管网页的样子,HTML 管网页的结构,两者分开写,网站才好维护4。
最小单位是一条规则:选中谁(选择器)、改成什么样(声明),写在哪里有三种选择——
独立的 .css 文件(行业标准做法)、HTML 里的 <style> 标签、元素上的 style 属性(只该用于临时的、极少数的情况)。
从这章起,后面每一章都在回答「一条规则里可以放什么、会撞上什么」。
② 选中谁:选择器(第 2 章)¶
按标签、按类、按 ID、按属性、按状态(悬停、聚焦)、按位置(第几个孩子)、按元素之间的关系(谁套着谁、谁挨着谁)。 这章的立场很明确:用能完成工作的最简单的选择器——写得太具体,后面就改不动5。
③ 选重了谁裁决:层叠与特异性(第 3 章)¶
同一个元素被多条规则同时选中是常态。裁决分三层:
!important 标记最横;否则给选择器算一个四位分(内联 > ID > 类/属性/伪类 > 元素),分高的赢;分一样,写在文件后面的赢。
另外有一批文字类属性(颜色、字体)会自动从父元素传给子元素——这叫继承,它解释了「为什么我只给 body 设了颜色,整页都变了」。
④ 元素是什么:盒子(第 4 章)¶
CSS 眼里每个元素都是一个矩形盒子,从里到外四层:内容、内边距、边框、外边距。
默认的宽度算法有个著名的坑:写了 width: 200px 再补 20px 内边距和 5px 边框,实际占 250px——
一行 box-sizing: border-box 把宽度定义收回来,这是几乎所有现代项目的起手式6。
还有一条反直觉规则:两个相邻元素的垂直外边距不相加,而是折叠成较大的那个。
⑤ 盒子怎么站队:显示与定位(第 5、6 章)¶
display 决定盒子是独占一行(block)、挤在文字流里(inline)、还是两者兼得(inline-block),
也可以让盒子彻底消失(none)。想让盒子脱队精确定位:相对自己挪(relative)、
钉在最近的有定位的祖先上(absolute)、钉在屏幕上(fixed)、滚动到某个位置才钉住(sticky)。
z-index 管重叠时的前后,但它只在脱队的元素上生效。
⑥ 一堆盒子怎么排:Flexbox 与 Grid(第 7、8 章)¶
现代布局就两套。Flexbox 排一维——一行或一列,主轴上怎么分、交叉轴上怎么对齐,
剩余空间让孩子按份长(flex-grow)按份缩(flex-shrink)。Grid 排二维——行和列同时定,
列宽可以写 1fr 这样的分数单位,repeat(auto-fit, minmax(250px, 1fr)) 一行就能让列数随屏幕宽度自动增减,
不用写一个媒体查询。原书给的分工原则:一维用 Flex,二维用 Grid,别拿 Flex 硬凑网格7。
⑦ 盒子里面的字:字体与文字(第 9、10 章)¶
字族按候选名单逐个回退(用户机器上没有第一个就用第二个);字号优先用 rem 这种相对单位; 行高写成不带单位的倍数,字大了行距自动跟着大。颜色、对齐、下划线、大小写、字距—— 这组属性管「文字长什么样、排成什么样」,它们大多能继承,所以在这层设一次,全站生效。
⑧ 盒子的皮:颜色、背景、圆角阴影滤镜(第 11–13 章)¶
颜色四种写法(关键字、HEX、RGB、HSL),HSL 因为人看得懂(色相、饱和度、亮度)而成为调配色系的趁手工具; 透明度有两条路:只透明背景(rgba)还是透明整个元素包括字(opacity)——用错是最常见的坑之一。 背景图和渐变都算「图」,铺满裁切是 cover、完整留白是 contain。 圆角、阴影、模糊滤镜给界面「立体感」,代价是性能:模糊类的滤镜很烧机器,要省着用8。
⑨ 让盒子动起来:过渡、变换、动画(第 14–16 章)¶
过渡回答「状态变了,能不能别瞬间跳,用 0.3 秒滑过去」;变换回答「怎么挪动、旋转、缩放, 而且不挤开周围的元素」;动画回答「我要一条多步的时间线,页面加载就自己跑,还能循环」。 三章共享同一条性能铁律:只动 transform 和 opacity,去碰宽度、高度、外边距,浏览器就要重排页面,动画会卡9。
⑩ 适配所有的屏幕:响应式与现代特性(第 17、18 章)¶
手机上看网页默认被当成「缩小的桌面网页」,一行 viewport meta 标签纠正这个前提;
然后用媒体查询按宽度切换样式——行业习惯是移动优先:先写小屏幕的,再用 min-width 往大里加。
第 18 章补上现代三件套:变量(改一处、全站换色)、calc()(百分比减像素这类混合运算)、
clamp()(尺寸随屏幕平滑伸缩但有上下限)、逻辑属性(写「文字开始的那一侧」而不是「左边」,多语言网站自动适配)10。
⑪ 落到具体部件:列表、表格、表单(第 19–21 章)¶
这三类 HTML 元素都带各家浏览器自己的默认长相,要自定义先重置: 列表去掉圆点、表格让相邻边框合并成一条线、表单控件剥掉系统外观(appearance: none)再自己画。 每章各给几个标准模式:横向导航、斑马纹表格、粘性表头、自定义复选框。
⑫ 别埋雷:最佳实践与常见错误(第 22、23 章)¶
命名用 BEM(块、元素、修饰符三段式),值集中到变量里,选择器嵌套别超三层,
出现 !important 战争说明该重构了。第 23 章把新手最常撞的六个坑挨个给解法:
外边距折叠、ID 选择器压死人、固定宽度撑破手机、height: 100% 没反应、z-index 设了不灵、漏写单位。
这章配浏览器的「检查元素」工具(DevTools)讲怎么看出哪条规则被谁压掉了11。
⑬ 用这本书的正确姿势(第 24 章 + 术语表)¶
最后一章是把全书压成按字母排序的 22 个最常用属性卡(语法、默认值、一行例子), 术语表再把全书的概念词收拢一遍。整本书的正确用法是:前 23 章通读建地图,日常写的时候查第 24 章——原书致谢页也是这么建议的:把旧项目用现代特性重写一遍、只用 Grid 搭一个复杂版面、用过渡动画做微交互12。
一句话收尾¶
这本书自己的总结是三原则:从简(用能干活的最简单的选择器和属性)、 处处响应(手机和桌面同等对待)、带着可访问性做(CSS 不只是好看,是让所有人能用)13。 拆开看,二十几章就是在给这三句话各配一整套具体做法。
3. 拆解章节地图¶
这张表不用记任何术语——每章后面写的是「什么时候来读它」。
| 章 | 什么时候来读 |
|---|---|
| 01 CSS 基础 | 第一次写 CSS;或者看不懂别人写的规则结构 |
| 02 选择器 | 想知道「怎么选中那个元素」,或选中了一大片不该选中的 |
| 03 层叠与特异性 | 「我写的样式为什么不生效」——九成是这章的事 |
| 04 盒模型 | 「两个 50% 宽的盒子为什么挤不下」「留白怎么对不齐」 |
| 05 显示与定位 | 「怎么把元素藏起来」「怎么让导航钉在顶上」「怎么居中一个弹窗」 |
| 06 Flexbox | 要排一行或一列:导航条、卡片行、垂直居中 |
| 07 Grid | 要排整个版面:页眉、侧栏、主区、页脚 |
| 08 字体与文字 | 管字的一切:字族、字号、行高、对齐、大小写 |
| 09 颜色与背景 | 配色、透明、渐变、背景图 |
| 10 圆角阴影滤镜 | 做「卡片感」「毛玻璃」「悬浮感」 |
| 11 动效 | 悬停渐变、加载动画、任何会动的东西 |
| 12 响应式与现代特性 | 手机上也得像样;想少写重复代码 |
| 13 列表表格表单 | 具体到这三类部件的样式与默认样式重置 |
| 14 实践与坑 | 项目变大之后怎么不把样式写成一坨 |
| 15 速查索引与术语表 | 记得要干什么、忘了怎么写的时候 |
推荐顺序: 01 → 02 → 03 → 04 → 05 → 06/07(布局两章可互换)→ 08–13 按需 → 14 收尾 → 15 当字典。 已经会 CSS 的人,直接读 03、04、07、11、12、14 六章,其余查 15。
4. 这本书覆盖什么、不覆盖什么¶
覆盖(而且按它的定位做得相当全)——读完你能回答:
- 现代 CSS 的全部常用部件有哪些,各自解决什么问题;
- 每个部件的语法、常见取值、默认值,以及一个能跑的最小例子;
- 每条路上最容易踩的坑(漏分号、忘 border-box、外边距折叠、rgba 与 opacity 混用……);
- 一堆即取即用的模式:完美居中、圣杯布局、自动填充网格、斑马纹表格、自定义复选框、毛玻璃;
- 怎么组织大型样式表(BEM、变量、reset、性能规矩)。
不覆盖(别指望在这本里找):
| 缺什么 | 说明 |
|---|---|
| 原理与实现 | 浏览器是怎么把 CSS 变成画面的、合成层是什么,全书只有「GPU(显卡)加速」等零散一句,没有展开 |
| 兼容性数据 | 没有 caniuse 式「特性 × 浏览器」支持对照表,只有「2020 年前的浏览器不支持 flex gap」这类孤例 |
| 正在标准化的新特性 | @layer、:has()、容器查询、视图过渡、锚点定位、subgrid——正文没有,只在结尾致谢页点了名3 |
| 生态工具 | Sass/LESS、Tailwind、CSS-in-JS、构建工具一概未提(utility 类只作为一行最佳实践出现) |
| 可访问性成体系的内容 | 只有零散提醒(对比度、focus 样式、别小于 16px),没有无障碍的系统讲法 |
| 权威背书 | 无参考文献、无出版社、作者背景查不到,内容的准确性靠它与主流文档(MDN 等)一致来保证 |
5. 我们的判断¶
判断(我们的,不是书里的): 这本书的正确用法是「地图 + 坑清单」,不是教材。 它的每一章都薄,但 24 章合起来构成了一张少见的完整地图:从选择器到工程实践,没有大块空缺。 新手按第 2 节的主线通读一遍,再回第 24 章当字典查,是效率最高的读法;老手只读第 22、23 章也有收获。 如果错,会错在: 如果读者的目标是理解 CSS 的设计动机(为什么层叠要这样裁决、为什么盒模型默认是 content-box), 这本书完全不给,读了它会用但不会懂——那需要另找规范史或深度教材。
判断(我们的,不是书里的): 把它与 MDN 对比:MDN 是逐个属性的权威文档(深、全、可查), 这本书是有人替你按「会遇到什么问题」组织过一遍的导读(浅、顺、可通读)。 两者互补,不冲突;但遇到与 MDN 不一致的细节,以 MDN 为准——这本书无审校背书。 如果错,会错在: 如果读者已有两年以上前端经验,这本书几乎全是已知内容, 那时它的价值只剩第 24 章那张属性卡片的排版方式,不值通读。
判断(我们的,不是书里的): 对「编程语言与系统研究」这个书库,它的独特价值在第 3 章: 层叠、特异性四位计分、继承默认值,是「一门所有规则共处全局、没有局部作用域的声明式语言,如何裁决冲突」的完整教学样本, 这类「默认与覆盖」机制在通用编程语言教材里几乎不讲。 如果错,会错在: 如果书库后续收进 CSS 规范原文或专门讲层叠算法(W3C cascade 规范)的源, 这一章的样本价值就会被更权威的来源取代。
6. 许诺兑现表¶
这份拆解里每一处「第 N 章讲」「见后面」,都在这里记一行、逐行核过。
| 许诺在哪 | 许诺了什么 | 应兑现在哪 | 核过了吗 |
|---|---|---|---|
| 本页 §2 ② | 选择器的种类与「最简单选择器」立场 | 02 §3–§5 |
✓ |
| 本页 §2 ③ | 三层裁决与继承 | 03 §3–§5 |
✓ |
| 本页 §2 ④ | border-box 与外边距折叠 | 04 §3–§5 |
✓ |
| 本页 §2 ⑤ | display 五种值与五种定位 | 05 全章 |
✓ |
| 本页 §2 ⑥ | Flex 与 Grid 的分工 | 06 §1、07 §1 与 §5 |
✓ |
| 本页 §2 ⑧ | rgba 与 opacity 的坑 | 09 §4 |
✓ |
| 本页 §2 ⑧ | 模糊滤镜的性能代价 | 10 §5 |
✓ |
| 本页 §2 ⑨ | 只动 transform/opacity 的铁律 | 11 §4、§7 |
✓ |
| 本页 §2 ⑩ | 变量/calc/clamp/逻辑属性 | 12 §3–§6 |
✓ |
| 本页 §2 ⑫ | 六个常见坑的解法 | 14 §4 |
✓ |
01 §1 |
为什么结构与样式要分开 | 01 §3 |
✓ |
02 §4 |
特异性到底怎么算 | 03 §3 |
✓ |
03 §4 |
盒模型与宽度的坑 | 04 §3–§4 |
✓ |
04 §5 |
display 怎么决定站队 | 05 §2–§3 |
✓ |
05 §6 |
Flex/Grid 怎么分活 | 06 §1、07 §1 |
✓ |
08 §1 |
颜色与背景怎么配 | 09 全章 |
✓ |
09 §6 |
阴影滤镜怎么做出立体感 | 10 全章 |
✓ |
10 §6 |
动效三件套怎么接起来 | 11 全章 |
✓ |
11 §7 |
响应式与现代特性 | 12 全章 |
✓ |
12 §7 |
三类 UI 部件的默认样式重置 | 13 全章 |
✓ |
13 §7 |
工程实践与踩坑 | 14 全章 |
✓ |
14 §7 |
速查索引的用法 | 15 全章 |
✓ |
拆解写于 2026-10-19,依据 2026 年版(epub)。原始书籍文件不入库,
本组文档是我们自己的重写;每条引用都可用 node scripts/book-verify.mjs css-reference-guide 回核。
-
出处:「Chapter 1: Introduction to CSS」(
text/02-ch01-1-chapter-overview.txt:5,搜「1. Chapter Overview」),全书各章结构相同:概述(第 1 节)、核心概念(第 2 节)、属性/特性参考(第 3 节)、常见模式(第 4 节)、常见错误与提示(第 5 节)、快速总结(第 6 节)。 ↩ -
补充(不在书里,来自书架元数据):epub 内嵌元数据记录日期 2026-02-03,标识 ASIN B0GL9QZ83S;Amazon 商品页标注 ISBN 9798246899724(https://www.amazon.co.uk/CSS-Reference-Guide-Complete-Quick-Lookup/dp/B0GLMC9V9N,查阅于 2026-10-19)。作者背景公开渠道查不到。 ↩
-
出处:「Thank You」(
text/28-fm-c2yj.txt:11,搜「living language」)。原文:「CSS is a living language. New features—like Container Queries, View Transitions, and Anchor Positioning—are constantly being added to the standard.」正文 24 章均无这三者的展开内容。 ↩↩ -
出处:「Chapter 1: Introduction to CSS」(
text/02-ch01-1-chapter-overview.txt:21,搜「Separation of Concerns」)。原文:CSS 让设计(CSS)与内容(HTML)分离,网站更易维护。 ↩ -
出处:「Chapter 2: Selectors Reference」(
text/03-ch01-1-chapter-overview.txt:171,搜「simplest selector」)。原文:「Always aim for the simplest selector that gets the job done.」 ↩ -
出处:「Chapter 4: Box Model Reference」(
text/05-ch01-1-chapter-overview.txt:149,搜「border-box」)。原文把忘加 border-box 称为布局「破碎」的第一大原因(如两个 50% 宽的盒子因为内边距挤不到一行),并建议用通用选择器给所有元素统一加上。 ↩ -
出处:「Chapter 8: Grid Layout Reference」(
text/09-ch01-1-chapter-overview.txt:138,搜「one-dimensional」)。原文:简单的一维排列用 Flexbox;需要两个方向对齐时才用 Grid。 ↩ -
出处:「Chapter 13: Borders, Shadows & Effects」(
text/14-ch01-1-chapter-overview.txt:138,搜「computationally expensive」)。原文:blur 与 backdrop-filter 计算昂贵,要省着用,尤其在频繁动画的元素和低端手机上。 ↩ -
出处:「Chapter 14: Transitions」(
text/15-ch01-1-chapter-overview.txt:144,搜「60fps」)与「Chapter 16: Animations」(text/17-ch01-1-chapter-overview.txt:136,搜「layout recalculations」)。两章各自重复了同一条铁律。 ↩ -
出处:「Chapter 18: Modern CSS Features」(
text/19-ch01-1-chapter-overview.txt:25,搜「Direction Independence」)。原文:逻辑属性让版面自动适配从右往左(RTL)或竖排书写的语言。 ↩ -
出处:「Chapter 23: Common CSS Mistakes」(
text/24-ch01-1-chapter-overview.txt:125,搜「Inspect, don't guess」)。原文:用浏览器的 Inspect Element 看哪些样式被划掉了(被覆盖)。 ↩ -
出处:「Thank You」(
text/28-fm-c2yj.txt:21,搜「Next Steps」)。 ↩ -
出处:「Thank You」(
text/28-fm-c2yj.txt:15,搜「Keep it Simple」;同文件:17搜「Stay Responsive」;:19搜「Accessibility」)。 ↩