CSS 单位
你已经会写像 color: teal 这样的声明。尺寸相关属性还需要第二个概念：有多大。单独的 font-size: 16 对大多数长度属性无效——浏览器需要一个单位，才能知道「16」表示什么。
什么是 CSS 单位？
CSS 单位是附在长度值上的度量后缀——例如 px、rem、%、vw 和 vh。绝对单位不论父元素如何都保持同样大小。相对单位随其他事物缩放：元素字体、根字体、父元素尺寸或视口（viewport）。
绝对与相对一览
把这张表当作地图。第一天不需要掌握每个单位——先认识类别，再练习日常单位。
📊 常用 CSS 长度单位
| 单位 | 类别 | 典型用途 |
|---|---|---|
| px | 绝对（屏幕像素） | 边框、图标微调、1px 细线 |
| rem | 相对根字体大小 | 页面正文与一致间距 |
| em | 相对元素自身字体大小 | 随本地文字增长的内边距 |
| % | 相对父元素尺寸 | 容器内的流式宽度 |
| vw | 相对视口宽度 | 通栏区块（谨慎使用） |
| vh | 相对视口高度 | 主视觉高度、全屏面板 |
像素（px）
px 是屏幕上的绝对单位。对细边框和小的固定细节很可预期。若在响应式站点里把所有排版都只用 px，就不太理想，因为它不会像 rem 那样随用户的根字体偏好自动缩放。
卡片边框的像素尺寸
css.card {
border: 1px solid #cbd5e1;
border-radius: 8px;
width: 320px;
}何时 px 仍然出色
需要固定视觉边缘时，优先用 px 做发丝边框、阴影偏移和细小 UI。当设计需要随字号或容器宽度呼吸时，优先用相对单位。
rem 与 em
rem 相对于根元素的字号（通常是 <html>）。em 相对于当前元素的字号（或按属性相对父元素）。对初学者来说，rem 是 font-size 和许多间距更稳妥的默认选择，因为在嵌套元素中保持一致。
用 rem 做相对根的排版
csshtml {
font-size: 100%; /* often 16px in browsers */
}
.lead {
font-size: 1.25rem; /* ~20px if root is 16px */
margin-bottom: 0.75rem;
}一句话理解 em
当你希望数值随本地字体缩放时用 em——例如组件文字变大时一起变大的内边距。若嵌套的 em 不断相乘、尺寸「失控」，就把那些尺寸改成 rem。
百分比（%）
百分比相对于父元素的某一尺寸。width: 50% 时，元素目标约为父宽度的一半（当父元素有明确宽度时）。百分比是容器内流式布局的经典工具。
用百分比做流式宽度
css.sidebar {
width: 30%;
}
.main {
width: 70%;
}视口单位（vw 与 vh）
1vw 是视口宽度的 1%；1vh 是视口高度的 1%。对全屏主视觉很强，但也容易滥用——仅用 vw 设定的文字在极宽或极窄屏幕上可能难以阅读。
主视觉的视口高度
css.hero {
min-height: 80vh;
padding: 2rem;
}实用的默认习惯
起步习惯：字号与多数垂直间距用 rem，宽度用 % 或灵活布局工具（稍后：Flexbox/Grid），边框与细小固定细节用 px。做通栏区块时再回头用视口单位——不要每个外边距都用。
自己动手试
- 创建
.card规则：width: 80%、max-width: 24rem、border: 1px solid #94a3b8。 - 设置
.card h2 { font-size: 1.5rem; }，短段落用1rem。 - 在卡片上方加
.banner { min-height: 40vh; }。 - 调整浏览器窗口并改根元素
html { font-size: … }，感受%、vh与rem的不同反应。 - 可选：在
.card内把标题改成1.5em，看看嵌套尺寸是否出乎意料。
常见错误
- 写不带单位的
font-size: 16——在标准 CSS 中对长度无效 - 在应尊重缩放/用户偏好的站点上所有字体都只用
px - 嵌套过多
em，直到文字过大或过小 - 正文只用
vw，导致大显示器上行距「爆炸」 - 假定父元素没有明确高度时
%高度仍有效
小结
- 长度值通常需要单位（
px、rem、%、vw…） - 绝对单位固定；相对单位随字体、父元素或视口缩放
- 排版优先
rem，宽度优先%/布局系统，细边框优先px em随本地字体；vw/vh随视口- 按任务选单位——不要处处强推同一单位
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部