写 CSS 时，字号、间距、宽高全都离不开单位。同样一个 24，写 24px、24rem、24vh 出来的效果天差地别。今天把最常用的几个单位一次讲清楚。
绝对单位：px
px（像素）是最直观的单位，写多少就是多少，不会受任何因素影响。
.title {
font-size: 18px; /* 永远是 18px 高 */
border: 1px solid #ccc; /* 细边框常用 1px */
}px 适合用在不该缩放的地方，比如边框、阴影偏移、分割线。缺点是"死板"：用户在浏览器里放大默认字号，px 写的字号不会跟着变，对可访问性不友好。
相对单位：em
em 相对于当前元素的 font-size 计算。当前字号是 16px，那 1.5em 就是 24px。
.card {
font-size: 16px;
}
.card p {
font-size: 0.875em; /* 16 × 0.875 = 14px */
margin: 1.5em; /* 相对的是 p 自己的 14px → 21px */
}注意一个容易翻车的细节：em 的参照物是当前元素自己的 font-size，而 font-size 里写 em 时参照的是父元素。嵌套几层之后，em 会像滚雪球一样层层放大或缩小，很难算清楚。
相对单位：rem
rem 相对于根元素 html 的 font-size 计算，不管嵌套多少层，参照物永远只有一个，这就避开了 em 的滚雪球问题。
html {
font-size: 16px; /* 浏览器默认值，rem 的基准 */
}
.title {
font-size: 1.5rem; /* 16 × 1.5 = 24px */
}
.card {
padding: 1.25rem; /* 20px，无论嵌套多深都是 20px */
}实战里更聪明的做法是把 html 的字号用百分比写：
html {
font-size: 100%; /* 跟随用户浏览器的默认字号 */
}这样用户调大浏览器默认字号时，整个页面的文字会一起放大，页面可访问性立刻上一个台阶。
视口单位：vw 与 vh
vw 和 vh 分别相对于视口宽度和高度的百分之一：100vw 就是整个屏幕宽度，50vh 是半屏高度。
.banner {
width: 100vw; /* 占满全屏宽 */
height: 60vh; /* 占屏幕高度的 60% */
}
.hero-title {
font-size: 5vw; /* 屏幕越宽字越大，天然响应式 */
}vw/vh 特别适合做全屏横幅、弹窗遮罩这类"跟着屏幕走"的布局。字号用 vw 也能实现简单的缩放效果，但要注意小屏上可能缩得太小，通常配合 clamp() 使用更稳。
怎么选：一张速查表
- 边框、阴影、图标细节 → px，保持精确
- 字号、间距 → rem，全局等比、可访问性好
- 组件内部相对缩放 → em，适合按钮、徽章这类随字号联动的元素
- 全屏布局、响应式大标题 → vw / vh
一个现代项目常见的组合是：间距和字号全用 rem，边框用 px，全屏区块用 vh/vw。
小结
- px 是绝对单位，精确但不跟随用户设置
- em 相对当前元素字号，嵌套多层会滚雪球，慎用
- rem 相对根元素字号，参照物唯一，是字号与间距的首选
- vw/vh 相对视口尺寸，适合全屏与响应式场景
- html 设
font-size: 100%，让 rem 跟随用户偏好
把单位的脾气摸清楚，你的页面在手机、电脑、各种缩放场景下都会稳得多。