跳到主要内容

CSS 单位

面试速答（30 秒版 TL;DR）​

  • CSS 单位可以先分成两类：绝对单位和相对单位。
  • 日常开发最常用的是：px、%、em、rem、vw、vh，做 Grid 时还常见 fr。
  • 高频对比一定要会：
    • px：固定直观
    • em：相对当前元素或父级字体大小，容易层层放大
    • rem：相对根元素字体大小，适合统一设计体系
    • %：相对参考对象，关键是先说清“相对谁”
    • vw/vh：相对视口，适合响应式
  • 面试常见坑：height: 100% 为什么不生效、em 为什么越嵌套越大、移动端 100vh 为什么不准。

心智模型​

不要把“单位”理解成单纯的长度后缀，它其实是在回答：

这个值到底拿谁当参考系？

一旦参考系不一样，表现就会完全不同。

一、绝对单位​

1）px​

最常用。它表示 CSS 像素，直观、稳定、好控制。

典型场景：

  • 边框：1px
  • 小图标：16px、24px
  • 精确微调的阴影、圆角、间距

2）打印相关单位​

例如 pt、cm、mm、in，更偏打印场景，页面布局面试里一般不是重点。

二、相对单位​

1）%​

百分比的关键不是背定义，而是先说：

它一定是相对某个参考值计算的，不同属性参考对象不一定一样。

高频点：

  • width: 50% 常相对父元素宽度
  • height: 100% 往往要求父元素有明确高度，否则容易不生效
  • padding、margin 中的百分比常与包含块尺寸相关

2）em​

  • 用在 font-size 上时，常相对父元素字体大小
  • 用在其他属性上时，常相对当前元素自己的字体大小

所以它很适合做“随组件字体缩放而同步缩放的内边距和圆角”，但嵌套深了容易失控。

3）rem​

始终相对根元素 html 的字体大小，优点是稳定、可预测，适合统一字号和设计系统间距。

面试常见答法：

  • 全局字号和间距体系常用 rem
  • 组件内部与文字强绑定的细节尺寸可以考虑 em

4）vw / vh / vmin / vmax​

  • 1vw = 视口宽度的 1%
  • 1vh = 视口高度的 1%
  • vmin 取宽高较小值
  • vmax 取宽高较大值

它们适合响应式布局、全屏模块、按视口变化的字号和留白。

5）dvh / svh / lvh​

移动端地址栏伸缩会让传统 100vh 看起来“不准”，现代面试可以补充：

  • dvh：动态视口高度
  • svh：较小视口高度
  • lvh：较大视口高度

如果项目要兼容移动端全屏高度，这是一个加分点。

6）fr​

fr 主要用于 Grid，表示分配剩余空间的比例份额。

grid-template-columns: 200px 1fr 2fr;

意思是：

  • 第一列固定 200px
  • 剩余空间按 1:2 分给后两列

三、典型题 & 标准答法​

Q1：px、em、rem 的区别？​

答法：

  • px 固定直观，适合精确尺寸。
  • em 相对字体大小，适合组件内随文字缩放的尺寸，但嵌套时容易累积。
  • rem 相对根元素，更适合全局一致的排版和间距体系。

Q2：为什么 height: 100% 经常不生效？​

答法：

  • 因为百分比高度通常需要父元素有明确高度。
  • 如果父元素高度是 auto，子元素的 100% 往往算不出来。

Q3：为什么很多项目喜欢用 rem 做响应式？​

答法：

  • 因为它统一相对根元素，设计稿换算和全局缩放更稳定。
  • 修改根字号，就能整体联动页面尺寸体系。

Q4：移动端全屏为什么不用纯 100vh？​

答法：

  • 因为浏览器地址栏显隐会让可视区动态变化。
  • 这会导致 100vh 和真实可见高度不完全一致。
  • 新一点的方案会考虑 dvh/svh/lvh。

常见追问​

1）em 什么时候比 rem 更合适？​

当你希望组件内部尺寸随当前字体同步缩放时，比如按钮的 padding、border-radius。

2）rpx 是不是 CSS 标准单位？​

不是。它通常是小程序等特定平台扩展出来的单位，不属于标准 CSS。

3）ch、ex 这类单位要不要会？​

知道即可，不是大多数前端面试的核心考点。除非岗位特别强调排版系统或编辑器场景。

易错点/坑​

  • 把 % 讲成“相对父元素”就结束了，没有说明具体看哪个属性。
  • 忘了 em 会随着嵌套层级累积。
  • 用 100vh 做移动端全屏，却忽略地址栏伸缩问题。
  • 看到 Grid 布局中的 fr，却不知道它本质是剩余空间分配单位。

速记要点（可背诵）​

  • px 固定，em 跟字体，rem 跟根，% 看参考系，vw/vh 跟视口，fr 分剩余空间。
  • 百分比高度要看父元素是否有明确高度。
  • 移动端全屏高度注意 dvh/svh/lvh。