em 与 rem
em 相对于父元素的字号，rem 相对于根元素（html）的字号。嵌套使用 em 会层层叠加（1.2em × 1.2em × …），很难预测；rem 永远以根字号为基准，整站改一处 html{font-size} 即可全局缩放。
实际项目的常见配比：正文用 rem，组件内部局部间距用 em，需要随容器变化的用 % 或 vw。
- em：相对父级字号，嵌套会叠加，慎用
- rem：相对根字号，整站统一，推荐做字号与间距主单位
- 根字号默认 16px，可用 html{font-size: 62.5%} 把 1rem 变成 10px 方便换算
CSS
html { font-size: 16px; } /* 1rem = 16px */
.card {
font-size: 1.125rem; /* 18px：相对根，可预测 */
padding: 1rem; /* 16px */
border-radius: .5rem; /* 8px */
}
.box {
font-size: 1rem;
padding: 1em; /* 相对自身字号 = 16px */
}
.box .inner { font-size: 1.2em; } /* 相对 .box = 19.2px，嵌套慎用 */
/* 整站放大：只改一处 */
html.big { font-size: 20px; }本节要点字号首选 rem（整站可控），局部间距可用 em；em 的嵌套叠加是初级 bug 高发区。
