面试题：常见的 CSS 布局单位有哪些？
CSS 提供了丰富的长度和布局单位，用于控制元素的尺寸、间距、字体等。根据使用场景，这些单位可分为 绝对单位 和 相对单位 两大类。掌握它们的特性有助于构建更灵活、响应式和可访问的网页。
一、绝对单位（Absolute Units）
绝对单位是固定的物理尺寸，不随父元素或视口变化，适用于打印样式或精确控制。
| 单位 | 名称 | 说明 |
|---|---|---|
px | 像素（Pixels） | 最常用的单位，1px 通常对应屏幕的一个 CSS 像素（非物理像素）。在屏幕上显示稳定，但在高 DPI 设备上可能不够清晰。 |
cm | 厘米 | 1cm = 10mm，用于打印样式。 |
mm | 毫米 | 1mm = 1/10 cm，打印常用。 |
in | 英寸 | 1in = 2.54cm，常用于打印或固定尺寸设计。 |
pt | 点（Points） | 1pt = 1/72 英寸，主要用于字体大小（尤其在打印中）。 |
pc | 皮卡（Picas） | 1pc = 12pt，较少使用。 |
✅ 使用场景：打印样式、需要精确物理尺寸的场景。
❌ 注意：在响应式网页中应避免过度使用绝对单位（尤其是px用于布局）。
二、相对单位（Relative Units）
相对单位是现代 CSS 布局的核心，能实现弹性、响应式和可访问性。
1. 相对于字体的单位
| 单位 | 说明 | 参考基准 |
|---|---|---|
em | 相对于父元素的 font-size | 动态，会继承并级联放大/缩小 |
rem | 相对于根元素（<html>）的 font-size | 全局统一，避免级联问题 |
✅ 使用场景：
rem：推荐用于字体、边距、内边距、布局，实现响应式。em：适合组件内部的相对尺寸（如按钮图标随文字缩放）。
2. 相对于视口的单位（Viewport Units）
| 单位 | 说明 |
|---|---|
vw | 视口宽度的 1%（1vw = 1% of viewport width） |
vh | 视口高度的 1%（1vh = 1% of viewport height） |
vmin | vw 和 vh 中的较小值 |
vmax | vw 和 vh 中的较大值 |
示例：
.full-height {
height: 100vh; /* 占满整个视口高度 */
}
.responsive-text {
font-size: 4vw; /* 字体随屏幕宽度变化 */
}✅ 使用场景：全屏布局、响应式字体、移动端适配。
3. 百分比单位（%）
- 相对于父元素的对应属性。
- 例如：
width: 50%→ 相对于父元素宽度font-size: 80%→ 相对于父元素字体大小margin: 10%→ 相对于父元素宽度（水平方向）
✅ 使用场景：流体布局、栅格系统、响应式容器。
4. 其他现代单位
| 单位 | 说明 |
|---|---|
ch | 相对于“0”字符的宽度（常用于等宽字体布局） |
ex | 相对于当前字体的 x-height（小写字母 x 的高度） |
fr | 网格布局中的“分数单位”（Grid Flexible Length），表示可用空间的一份。如 1fr 表示均分剩余空间。 |
auto | 自动计算尺寸，由浏览器根据内容或布局决定。 |
示例（Grid）：
.grid {
display: grid;
grid-template-columns: 1fr 2fr; /* 两列，比例 1:2 */
}三、单位选择建议（面试加分点）
| 场景 | 推荐单位 | 原因 |
|---|---|---|
| 字体大小 | rem 或 em | 支持用户缩放，可访问性好 |
| 布局尺寸（宽/高/边距） | rem、%、vw、fr | 弹性布局，响应式友好 |
| 精确控制（边框、阴影） | px | 不希望随缩放变化 |
| 全屏/视口相关 | vh、vw | 直接关联视口尺寸 |
| 网格布局 | fr | 灵活分配剩余空间 |
| 等宽文本布局 | ch | 基于字符宽度，精确对齐 |
四、总结对比表
| 单位类型 | 单位示例 | 是否响应式 | 主要用途 |
|---|---|---|---|
| 绝对单位 | px, pt, cm | ❌ | 打印、精确控制 |
| 字体相对 | em, rem | ✅ | 字体、组件、布局 |
| 视口相对 | vw, vh, vmin | ✅✅ | 全屏、响应式设计 |
| 父元素相对 | % | ✅ | 流体布局、栅格 |
| 现代布局 | fr, ch, auto | ✅ | Grid、文本对齐、自动计算 |
💬 一句话总结：
“CSS 布局单位丰富多样：
px用于精确控制，rem/em实现可访问性，%/vw/vh支持响应式，fr是 Grid 布局的核心。选择合适的单位，是构建现代网页的基础。”
在面试中，能结合 响应式设计、可访问性、Grid/Flex 布局 等场景说明单位选择依据，会显著提升专业形象。
THE END
