px、em、rem、vw、vh、百分比这些 CSS 单位有什么区别？

简化版

px 是固定像素单位，em 相对当前元素字体大小，rem 相对根元素字体大小，vw/vh 相对视口宽高，百分比相对包含块或属性规则。选单位时要看它应该跟字体、容器还是视口一起变化。

详细版

CSS 单位不是“哪个更高级”的问题，而是“跟谁联动”的问题：

px：稳定、直观，适合边框、细线、固定间距。
em：相对当前元素字体大小，容易受嵌套影响。
rem：相对 html 字体大小，适合全局字号和间距体系。
%：相对参照物取决于属性，宽度通常相对包含块。
vw/vh：相对视口，适合首屏、全屏布局，但移动端地址栏会带来细节差异。

面试重点是能讲清楚参照物，而不是背单位列表。

完整版教学

一、CSS 单位的本质是参照物

很多同学背单位时会说 px 固定、rem 自适应。这不够准确，因为单位背后的关键是“这个值相对谁计算”。只要参照物变了，最终像素值就会变。

.title {
  font-size: 2rem;
  margin-top: 1em;
  width: 50%;
}

如果根字号是 16px，2rem 就是 32px。如果当前元素字体大小是 32px，1em 就是 32px。如果父容器宽度是 800px，50% 宽度就是 400px。

二、px 稳定，但不是不响应

px 是 CSS 像素，不等于物理屏幕像素。浏览器会根据设备像素比做映射，所以一个 CSS 1px 在高分屏上可能对应多个物理像素。它的优势是数值稳定，设计稿还原和细节控制直观。

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
}

例如卡片圆角 8px、边框 1px、图标尺寸 24px，用 px 通常更清楚。响应式布局也可以使用 px，关键是配合媒体查询、弹性布局或容器约束。不要把 px 简单等同于“不能适配”。

三、em 和 rem 的区别最容易被追问

em 相对当前元素的字体大小。如果用于 font-size，它相对父元素字体大小计算；如果用于 margin/padding，它相对自身计算后的字体大小。 rem 始终相对根元素 html 的字体大小，更适合做全局尺度。

html { font-size: 16px; }
.parent { font-size: 20px; }
.child {
  font-size: 2em; /* 40px */
  margin: 1em;    /* 40px */
  padding: 1rem;  /* 16px */
}

单位	参照物	常见用途	风险
`em`	当前或父级字体	组件内部随字体缩放	嵌套后难算
`rem`	根元素字体	全局字号、间距体系	依赖根字号策略
`px`	CSS 像素	细节尺寸	过度固定会僵硬

记住这个例子，面试里基本能说明二者差别。

四、百分比单位的参照物不是永远相同

百分比最容易让人误判。 width: 50% 通常相对包含块宽度，但 transform: translateX(50%) 相对自身尺寸。 padding-top: 50% 传统上常用于按宽度制造比例盒子。

.box {
  width: 50%;
  transform: translateX(50%);
}

流程可以这样理解：

看到百分比
  -> 先看属性
  -> 再查该属性定义的参照物
  -> 最后计算使用值

所以不能只说“百分比相对父元素”。更准确的回答是：多数布局尺寸相对包含块，但不同属性有自己的计算规则。

五、vw/vh 适合视口布局，也有移动端坑点

1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。例如视口宽度 1200px 时，50vw 是 600px。它们适合首屏、全屏背景、大屏布局。

.hero {
  min-height: 100vh;
  width: 100vw;
}

移动端浏览器地址栏展开和收起会改变可视区域。某些场景下 100vh 可能导致底部内容被遮挡或出现跳动。现代 CSS 还提供 svh、lvh、dvh 等单位来更精细处理视口高度。

记忆钩子：选单位不是选流派，而是选联动对象；跟字体走用 em/rem，跟容器走用 %，跟视口走用 vw/vh。

六、工程里如何组合这些单位

实际项目很少只用一种单位。常见策略是：基础字号和间距用 rem，组件内部局部比例用 em，边框和图标用 px，布局宽度用 % 或弹性布局，首屏高度用视口单位。这样每种单位都服务于自己的参照物。

.layout {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

.button {
  font-size: 1rem;
  padding: 0.5em 1em;
  border: 1px solid currentColor;
}

按钮的 padding 用 em 后会随按钮字号变大变小。页面容器用 min() 组合百分比和最大宽度，能同时照顾移动端和桌面端。

七、常见误区与追问

误区：px 一定不能做响应式。 响应式取决于布局策略，不是单个单位决定的。
误区：em 永远相对父元素。 font-size 中相对父元素，其他很多属性相对当前元素计算后的字体大小。
误区：百分比永远相对父元素宽度。 百分比参照物取决于具体属性，例如 transform 百分比相对自身。
追问：为什么移动端 100vh 可能有问题？ 浏览器地址栏显示状态会影响可视高度，导致内容被遮挡或跳动。
追问：rem 适合做什么？ 适合全局字号和间距体系，因为它统一相对根字号，便于整体缩放。
追问：按钮 padding 为什么常用 em？ 组件字号变大时，内边距也随之变大，视觉比例更稳定。

八、加强记忆

把单位按参照物串起来：px 看 CSS 像素，em/rem 看字体，% 看属性规则和包含块，vw/vh 看视口。面试答题不要只列清单，要用 16px -> 2rem = 32px、800px -> 50% = 400px 这种数字例子说明你真的懂计算过程。

简化版

详细版