学习前提
理解盒模型，能使用类名设置样式。
本课完成后你能做什么
根据用途选择 px、rem、em、百分比与视口单位，并建立可阅读的正文节奏与对比关系。
先理解机制
px 是 CSS 像素，不一定等于屏幕物理像素。rem 相对根元素字体大小，em 在 font-size 上相对父级字体大小，而在许多其他属性上相对本元素字体大小。百分比的参照取决于属性，不能概括成“总是父元素宽度”。选单位的关键是你希望哪一部分变化时，当前尺寸跟着变化。
阅读体验由字号、行高、行长和段落间距共同决定。无单位 line-height 会按子元素自身字号计算，适合继承。把一行文字无限拉长会增加回行寻找下一行的负担，可用 max-width 控制正文。颜色不能是唯一的信息通道；链接、错误和选中状态还应有文字、形状或其他可识别线索。
可运行示例
<style>
body{font-family:system-ui,sans-serif;font-size:1rem;line-height:1.7;color:#20362c;background:#fbfcf8}
article{max-width:65ch;margin:2rem auto;padding:1rem}
h1{font-size:clamp(1.8rem,4vw,3rem);line-height:1.2}
a{color:#286c4d;text-decoration:underline;text-underline-offset:.2em}
</style>
<article><h1>Readable learning notes</h1><p>Good typography supports long reading sessions without making every paragraph compete for attention.</p><a href="#more">Read the next section</a><h2 id="more">Keep a steady rhythm</h2></article>推演与验证
在完整 HTML 文档中运行，比较窄屏与宽屏标题变化。clamp 设置最小、流动和最大值；它不会无限增长。改变浏览器默认字号或缩放，查看布局是否仍容纳文本。用开发者工具切换链接下划线，判断没有颜色时还能否识别链接。
常见错误与边界
不要为了“整齐”固定每段高度。不要把低对比灰色当作所有辅助信息的默认答案。ch 基于字符0的度量，并不保证中文每行恰好某个字数。字体回退可能改变行宽，测试应包括缺少首选字体的情况。
动手练习
给正文、标题和注释建立三种字号层级，保留清楚的区别，但把用户默认字体设大后仍不发生内容裁切。
参考解法与理由
正文使用rem，标题可用有边界的clamp，注释不要缩到难以阅读。容器用内边距和自然高度承接变化，而非根据某台显示器微调固定像素坐标。使用真实中英文段落测试，短占位文字不足以暴露换行问题。