颜色与单位 - CSS 教程

讲解

颜色有四种主流写法。颜色关键字（red、tomato、rebeccapurple）约 140 个，适合演示；十六进制 #rrggbb 最常见，#f00 是 #ff0000 的简写，#ff000080 末尾两位是透明度；rgb() 函数用 0-255 三个分量，现代语法推荐空格分隔加斜杠透明度：rgb(255 0 0 / 50%)；hsl() 用「色相 0-360、饱和度%、亮度%」描述颜色，更符合直觉——想得到一个颜色的深色版，把亮度调低即可。还有一个特殊关键字 currentcolor，代表「当前元素的文字颜色」，让边框、阴影自动跟随 color 变化。

长度单位分绝对和相对两类。绝对单位里只需要记住 px（像素）；相对单位是重点：% 相对父元素的对应尺寸；em 相对「当前元素的字号」（用在 font-size 上时相对父元素字号）；rem 永远相对根元素的字号，不受嵌套影响；vw/vh 是视口宽高的 1%。社区通行的搭配是：布局尺寸用 rem（用户调大浏览器字号时页面整体等比放大，无障碍友好），组件内部细节用 em 或 px，整屏区块用 vw/vh，line-height 用无单位数字（按各元素自身字号等比继承）。

还有一个容易忽略的点：CSS 里 0 可以不带单位（0 就是 0），但非零值必须带单位，width: 100 是无效声明会被浏览器静默丢弃——这类「写错不报错」的特性是 CSS 调试难的原因之一，DevTools 里无效声明会被划掉并带黄色警告图标，要学会看。

示例

:root {
  font-size: 16px; /* rem 的基准 */
}
.card {
  width: 30rem; /* 480px，跟随用户字号设置缩放 */
  padding: 1.5rem;
  color: #343a40;

  /* 四种颜色写法等价 */
  border: 2px solid #e8590c;
  outline: 2px solid rgb(232 89 12 / 50%);
  background: hsl(27 98% 95%);
  box-shadow: 0 2px 8px currentcolor; /* 阴影跟随文字颜色 */
}
.title {
  font-size: 1.25rem; /* 20px */
  line-height: 1.4; /* 无单位：相对自身字号 */
}
.badge {
  font-size: 0.75em; /* 相对父元素字号：title 里是 15px */
}
.hero {
  height: 60vh; /* 视口高度的 60% */
}

常见坑

em 层层放大：在嵌套列表里每级都写 font-size: 1.2em，字号会指数级放大（1.2 的 n 次方）。需要稳定缩放请用 rem。
% 的参照系猜错：width 的 % 相对父元素宽度，但 padding-top 的 % 也相对于「宽度」（不是高度！），height 的 % 只有在父元素有确定高度时才生效。
忘记写单位：width: 200 会被静默丢弃，页面表现像「属性没写」。养成看 DevTools 警告的习惯。
滥用 100vh 做移动端整屏：手机浏览器地址栏收起前后 vh 会变，内容会被裁。现代方案是用 dvh（动态视口单位），需要兼容旧机时配合 vh 兜底。
透明度只会用 rgba：现代语法 rgb(255 0 0 / 50%) 更直观；另外 opacity 属性会让整个元素（含文字）变透明，只想背景半透明要用带 alpha 的颜色值。

小结

颜色记住 hex、rgb()、hsl() 与 currentcolor；单位记住 px、rem、em、%、vw/vh 的分工，line-height 用无单位数字；非零长度必须带单位。下一节进入 CSS 的第一块基石：盒模型。