CSS 值与单位深入

0. 直觉：同样的“100”，在不同单位下含义完全不同#

100px 是固定长度，100% 是父容器比例，100vw 是视口宽度，100ch 是字符宽度。单位决定“数值相对谁”，选错单位是响应式布局最常见的错误来源。

1. 绝对单位 vs 相对单位#

讲解： 网页布局“默认信任 px”，需要随容器/视口/字号伸缩时才切换相对单位。

2. % 的两种语义#

.child {
  width: 50%;   /* 相对父元素内容宽度 */
  margin-top: 10%;  /* 注意：上下 margin 的百分比也相对“宽度” */
}

讲解： width: 50% 相对父容器宽度；height: 50% 只有在父元素有确定高度时才有意义。而 margin/padding 的百分比（上下左右）一律相对父元素宽度，这是常见误区。

3. em 与 rem 的详细对比#

html {
  font-size: 16px;
}
.parent {
  font-size: 20px;
}
.child-em {
  font-size: 1.5em;  /* 相对父级：20px * 1.5 = 30px */
}
.child-rem {
  font-size: 1.5rem; /* 相对根：16px * 1.5 = 24px */
}

讲解：

• rem 永远相对根元素字号，层级再多也不变，适合全局字号体系；
• em 相对最近父级字号，嵌套时会“叠加放大”，适合需要随上下文缩放的元素（如按钮内边距）；
• 用 em 做 padding 时，内边距会随自身字号变化，这是实现“按钮越大、内边距越大”的常用技巧。

4. 视口单位：vw/vh/vmin/vmax#

.hero {
  height: 100vh;          /* 一屏高 */
  font-size: 5vw;         /* 随视口宽度缩放 */
}
.cover {
  width: 100vmin;         /* 取视口宽高较小者 */
}

讲解： vw 是视口宽度的 1%，vh 是视口高度的 1%，vmin/vmax 取两者的小/大值。移动端注意地址栏伸缩会让 100vh 跳动，常改用 100dvh（动态视口）或 min-height。

5. 字体相对单位：ch/ex/cap#

code {
  max-width: 60ch;  /* 约 60 个字符宽，代码行宽标准做法 */
}

讲解： ch 是“0”字符的宽度，ex 是“x”字母高度，cap 是大写字母高度。它们让尺寸跟随字体度量，常用于限定阅读行宽与首字下沉；中文场景 ch 约等于一个汉字宽度，做中文段落行宽同样好用。

6. 单位选择决策表#

7. 动手试试#

1. 分别用 px/em/rem 给同一元素设置字号，用 DevTools Computed 面板查看最终像素值；
2. 给嵌套三层父级各设不同字号，对比 em 与 rem 的叠加效果；
3. 用 100vh 做全屏区块，在手机模拟器上观察地址栏伸缩时的跳动，再换 100dvh；
4. 进阶挑战：给文章设置 max-width: 65ch，对比不同字号下的阅读体验。

8. 核心知识点#

一句话记住值与单位：px 稳、% 随容器、rem 随根字号、em 随父级、vw/vh 随视口、ch 随字符。

• 绝对单位网页只用 px，其余留给印刷；
• margin/padding 的百分比相对宽度；
• rem 相对根字号，em 相对父级字号且会叠加；
• vw/vh 相对视口，移动端优先 dvh；
• ch 约等于一个字符宽，适合行宽限制；
• 复杂场景用 calc()/clamp() 组合，见 css/120-CSSFunctions。

9. 注意事项与改进建议#

10. 扩展学习#

• 函数与流体排版：css/120-CSSFunctions；
• 文本与字体基础：css/070-TextAndFontsBasics；
• 响应式设计：css/370-ResponsiveDesign；
• 移动端适配：css/380-MobileAdaptation。