第一章 · 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>）的字号，不会因为嵌套而累积，是目前更推荐的排版单位。

html { font-size: 16px; } /* 1rem 的基准 */
.title { font-size: 1.5rem; }  /* 恒等于 24px，不受嵌套影响 */
.title .icon { margin-right: 0.5em; } /* 相对 .icon 自身字号，常用于图标间距 */

视口单位

.hero {
  min-height: 100vh; /* 移动端浏览器地址栏可能导致抖动 */
  min-height: 100dvh; /* 优先用动态视口高度修正 */
}

百分比

百分比总是相对某个"参照物"计算，且不同属性的参照物不同，这也是初学者最容易困惑的地方：

• width / height 百分比——相对包含块（通常是父元素）的对应尺寸。
• margin / padding 的百分比（包括上下方向）——统一相对父元素的宽度，这也是"padding-top: 100% 做正方形占位"技巧的原理。
• font-size 百分比——相对父元素的字号，效果等价于 em。
• line-height 百分比——相对自身字号。

颜色单位

更多颜色系统、透明度与现代色彩函数（如 oklch()）见 7.1 颜色系统与透明度。

如何选择

• 页面整体字号、排版尺寸——优先 rem，可通过根字号统一缩放全站（如无障碍需求下用户放大字体）。
• 边框、阴影等不需要跟随字号缩放的细节——用 px。
• 需要与视口尺寸联动的大尺寸区块（如首屏高度）——用 vh/vw，注意移动端优先 dvh。
• 组件内部与自身字号联动的间距（图标、徽标）——用 em。