习题

CSS基础

1. 外联、嵌入、内联三种引入方式，级联权重谁高谁低？常规项目为什么推荐外联？（再认）
2. 不写任何 CSS 的网页"没有样式"吗？各浏览器渲染同一份 HTML 为什么会有细微差异？工程上如何抹平？（再认）
   • 提示：从"级联的最底层是什么"想
3. .title 与 #title 两条规则对同一元素的 font-size 给出不同值，谁生效？如果再有一条 h1 { font-size: 28px } 写在两者之后呢？（辨析）
   • 提示：级联先比什么、再比什么
4. 给定下面的代码，<h2> 的 color 最终是什么值？若删掉 #poem h2 那一行，又变成什么、为什么？（辨析）
   <!DOCTYPE html>
   <html>
   <head>
     <title>Parcel Sandbox</title>
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="/styles.css" />
   </head>
   <body>
     <h1>Hello world</h1>
   </body>
   </html>

   Open Sandbox
   • 提示：先收直接命中 h2 的规则比权重；删掉后 h2 没有直接命中，沿继承找最近祖先——祖先身上 article 与 .card 两条规则谁说了算？
5. .card p 这样的选择器，浏览器匹配时"从最右端开始"是什么意思？为什么说 CSS 没有"按书写顺序逐条执行"这回事？（辨析）
   • 提示：每个元素自问"我命中了哪些规则"，收齐清单再走裁决链

伪类、伪元素与内容生成

6. 用"设计时/运行时"这把尺子，说明 class="card" 与 :hover 的差别——伪类的"伪"字何解？（再认）
7. 给导航写 :hover 变色，全程没写一行 JS——"鼠标正在上面"这个状态是谁在跟踪？状态一变，颜色靠什么机制自动跟上？（辨析）
8. 想用 querySelector 选中 ::before 生成的那段内容，为什么必然失败？它到底住在哪棵树里？（辨析）
   • 提示：DOM 树与渲染树各收留什么
9. :has() 俗称"父选择器"，为什么等了二十多年浏览器才敢实现？（辨析）
   • 提示：从最右端匹配的省力前提，被反查破坏在哪

字体

10. font-family: 微软雅黑, sans-serif 在一台没装微软雅黑的 macOS 上会发生什么？回退链的每一站在找什么？（再认）
11. 为什么中文字体不能像西文字体一样整库附带进网页？子集化与 unicode-range 分片各解决什么？（辨析）
12. 图标字体与位图图标（png）放大三倍，显示效果有何不同？根源在矢量还是位图？（辨析）

排印

13. 用于 font-size 的 em 与用于 padding 的 em，参照物分别是谁？rem 又相对谁？（再认）
14. 段首缩进两字为什么写 text-indent: 2em 而不是 32px？（辨析）
    • 提示：字号一旦改变，谁不用改
15. <canvas> 里画的图形、<img> 引的图片、正文段落，CSS 对三者的控制能力如何分级？（迁移）
    • 提示：回忆置换与非置换元素之分

现代CSS语法

16. --brand-color 自定义属性与 SCSS 的 $brand-color 变量，都是"变量"，本质区别是什么？（辨析）
    • 提示：一个活在运行时，一个编译完就消失了
17. clamp(16px, 2vw + 8px, 32px) 一行替代了过去几段媒体查询的活，它各自在什么条件下取最小值与最大值？（再认）
18. 深浅主题切换为什么只覆盖 [data-theme="dark"] 里的变量、而不必写两套样式？这印证了哪条本周的总体原则？（辨析）
19. 预处理器（SCSS）与"升级 CSS 本身"是补齐 CSS 编程特性的两条路，为什么说后者胜出了？（迁移）
    • 提示：对照 babel 与新浏览器的关系（见第 13 周）

设计规范

20. 同一句"要现代简洁的风格"，为什么写在提示词里管不了几次，写进 DESIGN.md 却能长期生效？两者的记忆差别在哪？（辨析）
    • 提示：提示词活多久，DESIGN.md 什么时候被读
21. DESIGN.md 里"只写 #B8422E"与"#B8422E 只用于主操作按钮"两条信息，各对应文件的两层结构中的哪一层？缺了后一条，AI 会犯什么错？（辨析）
22. 前端UI术语手册的四层架构里，Components 节登记的是哪一层的名词？Colors、Shapes 这些节又对应哪一层？（迁移）