第一章 · 1.3 节
长度与颜色单位
几乎每一条 CSS 声明都离不开单位——尺寸用长度单位，颜色用颜色单位。本节梳理最常用的几种，为后面 10.2 calc / min / max / clamp 和响应式布局打好地基。
绝对单位：px
px（像素）是最直观的绝对单位，不受父元素或根元素字号影响。适合边框、阴影偏移等不需要跟随字号缩放的场景。
.card { border: 1px solid #ddd; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
相对单位：em 与 rem
em 相对"当前元素的字号"计算，且会随着嵌套层层累积；rem（root em）则始终相对根元素（<html>）的字号，不会因为嵌套而累积，是目前更推荐的排版单位。
em 的累积效应
外层 16px
中层 1.5em = 24px
内层 1.5em = 36px（相对 24px 计算）
html { font-size: 16px; } /* 1rem 的基准 */ .title { font-size: 1.5rem; } /* 恒等于 24px，不受嵌套影响 */ .title .icon { margin-right: 0.5em; } /* 相对 .icon 自身字号，常用于图标间距 */
经验法则字号本身用
rem，避免嵌套累积导致的意外缩放；而 padding/gap 这类希望"跟随当前元素字号等比缩放"的间距，用 em 反而更符合直觉。视口单位
| 单位 | 含义 |
|---|---|
| vw | 视口宽度的 1% |
| vh | 视口高度的 1% |
| vmin | vw 与 vh 中较小的一个 |
| vmax | vw 与 vh 中较大的一个 |
| svh / lvh / dvh | 分别对应移动端浏览器地址栏影响下的最小 / 最大 / 动态视口高度 |
.hero { min-height: 100vh; /* 移动端浏览器地址栏可能导致抖动 */ min-height: 100dvh; /* 优先用动态视口高度修正 */ }
百分比
百分比总是相对某个"参照物"计算，且不同属性的参照物不同，这也是初学者最容易困惑的地方：
width/height百分比——相对包含块（通常是父元素）的对应尺寸。margin/padding的百分比（包括上下方向）——统一相对父元素的宽度，这也是"padding-top: 100% 做正方形占位"技巧的原理。font-size百分比——相对父元素的字号，效果等价于 em。line-height百分比——相对自身字号。
颜色单位
| 写法 | 示例 | 说明 |
|---|---|---|
| 十六进制 | #3f5d54 / #3f5d54cc | 最常见，末两位可选表示透明度 |
| rgb() | rgb(63 93 84 / 80%) | 现代语法支持空格分隔 + 斜杠透明度 |
| hsl() | hsl(160 20% 30%) | 色相/饱和度/明度，调整明暗更直观 |
| 关键字 | currentColor / transparent | currentColor 引用元素自身的 color 值，常用于边框、SVG 填充跟随文字色 |
更多颜色系统、透明度与现代色彩函数（如 oklch()）见 7.1 颜色系统与透明度。
如何选择
- 页面整体字号、排版尺寸——优先
rem，可通过根字号统一缩放全站（如无障碍需求下用户放大字体）。 - 边框、阴影等不需要跟随字号缩放的细节——用
px。 - 需要与视口尺寸联动的大尺寸区块（如首屏高度）——用
vh/vw，注意移动端优先dvh。 - 组件内部与自身字号联动的间距（图标、徽标）——用
em。