CSS绝对与相对单位 | AI生成和翻译
CSS 单位：绝对与相对——全面解析
CSS 提供两大类单位：绝对单位和相对单位。
1. 绝对单位
这类单位具有固定的物理尺寸，不会根据文档中的其他元素而变化（屏幕设备像素比除外）。
| 单位 | 名称 | 描述 | 典型使用场景 |
|---|---|---|---|
| px | 像素 | 1px = 1/96英寸（CSS 参考像素） | 精细控制（边框、图标等）最常用 |
| cm | 厘米 | 实际物理厘米 | 打印样式表 |
| mm | 毫米 | 实际物理毫米 | 打印 |
| in | 英寸 | 1in = 2.54cm | 打印 |
| pt | 点 | 1pt = 1/72英寸 | 打印（传统排版） |
| pc | 派卡 | 1pc = 12pt | 打印 |
| Q | 四分之一毫米 | 1Q = 1/40厘米 | 高精度打印 |
在您的选项中，只有 px (A) 是绝对单位。
2. 相对单位
这类单位基于其他参照物（父元素、根元素、视口等）进行缩放。这使得布局具有响应式和可访问性。
| 单位 | 名称 | 相对于什么？ | 常见用途与行为 |
|---|---|---|---|
| em | em | 当前元素的字体大小 | 适用于组件级缩放（例如卡片或按钮内部）。复合效应：在已经是 1.2em 的父元素内，1.5em 将变为根字体大小的 1.2 × 1.5 = 1.8 倍。 |
| rem | 根 em | 根元素（<html>）的字体大小 |
全局缩放的首选。无复合问题。设置 html { font-size: 62.5%; } 可使 1rem = 10px，便于计算。 |
| % | 百分比 | 取决于属性： • 字体大小 → 父元素的字体大小 • 宽度/高度 → 父元素的宽度/高度 • 边距/内边距 → 父元素的宽度（即使是垂直方向！） |
布局（Flexbox/Grid）、响应式排版、间距等极其常见。 |
| vw | 视口宽度 | 1vw = 视口宽度的 1% | 大标题、全宽元素 |
| vh | 视口高度 | 1vh = 视口高度的 1% | 英雄区块、全高容器 |
| vmin | 视口最小尺寸 | 1vmin = 视口较小尺寸的 1% | 在移动端不会过大的响应式文本 |
| vmax | 视口最大尺寸 | 1vmax = 视口较大尺寸的 1% | 使用较少，但在某些边缘情况下有帮助 |
| ex | x 高度 | 字体中小写字母 “x” 的高度 | 现今很少使用（不同字体间不一致） |
| ch | 字符宽度 | 字体中 “0”（零）字符的宽度 | 限制行宽有用（max-width: 65ch） |
| lh | 行高 | 元素的行高（CSS 逻辑属性，较新） | 垂直节奏间距 |
为什么相对单位重要
- 可访问性：使用相对单位时，增大浏览器字体大小（或使用缩放）的用户将看到正确的缩放效果。
- 响应性：当视口改变时，布局会自动适应。
- 可维护性：更改一个值（例如根字体大小），所有元素会按比例缩放。
针对您原问题的快速参考
| 选项 | 单位 | 类型 | 原因 |
|---|---|---|---|
| A | px | 绝对单位 | 固定的物理尺寸 |
| B | em | 相对单位 | 相对于元素自身的字体大小 |
| C | % | 相对单位 | 相对于父元素（因属性而异） |
| D | rem | 相对单位 | 相对于根元素（<html>）的字体大小 |
正确答案：B, C, D – em、% 和 rem 都是相对单位。
在现代几乎所有专业项目中，使用 rem 处理大多数间距/排版，以及使用 % 或 vw/vh 处理布局是当前的最佳实践。