05颜色与单位

CSS 里出现频率最高的两类值：颜色和长度。颜色有四种写法外加一个「变色龙」关键字；长度单位分绝对与相对两派—— 弄懂「百分比到底相对谁」这个反直觉问题，你才算真正摸到了 CSS 的脾气。

约 16 分钟 8 个动手实验配色与度量地基

一、颜色的四种写法

给 color、background、border 上色，写法有四种：颜色关键字（keyword）、十六进制（hexadecimal）、 rgb()、hsl()。它们只是「同一个颜色的四张名片」，表达能力完全等价。

十六进制 #rrggbb 每两位表示红 / 绿 / 蓝通道，范围 00~FF（即 0~255）；三位缩写 #f80 每位自动翻倍，等价于 #ff8800。 hsl() 三个参数是色相（hue，0~360 的色环角度）、饱和度（saturation，%）、亮度（lightness，%），想调「同一色系的深浅」，改第三个数就行，比 hex 直观得多。

颜色四种写法速查：同一个番茄红，四张写法名片
写法	示例	特点与场景
关键字	`tomato`、`steelblue`	140+ 个预定义名字，学习演示方便；正式项目少用
十六进制	`#FF6347`；`#f80` = `#ff8800`	设计稿取色标配，两位一组对应 R / G / B
rgb()	`rgb(255, 99, 71)`	0~255 三通道直写；要配透明度用 rgba()
hsl()	`hsl(9, 100%, 64%)`	色相 + 饱和度 + 亮度，调同色系深浅最顺手

四块色板四种写法、颜色一模一样：把 .sw-hsl 里的 9（色相）改成 210，只有它变成蓝色系

记法：取色用 hex（设计稿直接抄）、调色系用 hsl （改亮度出深浅一套）。项目里全站统一一种写法，别混着来。

二、透明度：给颜色开个「天窗」

每种颜色写法都能追加第四个参数——alpha 透明度，取值 0（全透明）~1（不透明）： rgba()、hsla()、8 位十六进制 （#B8552F80 的 80 = 128/255 ≈ 50%）。还有一个特殊关键字 transparent，等价于全透明的黑。

叠色现场：把 .ov-b 的 .55 改成 1，它和左边实心盒再无区别；改成 .2 看棋盘格透得更多

transparent / rgba 的透明度只作用于「这一个颜色值」；而 opacity: 0.5 会让整个元素连同里面的文字、图片一起变透明。想要「背景透、字不透」，用 rgba 背景，别用 opacity。

三、currentColor：跟着 color 走的「变色龙」

currentColor 是一个特殊关键字，代表当前元素 color 的计算值。边框、阴影、下划线……哪里写了它，哪里就自动跟随 color 变色。冷知识：border 省略颜色时，默认值就是 currentColor。

变色龙卡片：把 .cham 的 color 改成 #4E7A52，边框、投影、下划线、圆点一起变绿——它们都没写死颜色

组件库里的 SVG 图标几乎都写 fill="currentColor"—— 图标放进按钮就是按钮的文字色，放进导航就是导航色，一份图标走天下。

四、绝对单位 px：它其实不是「物理像素」

px 是 CSS 的参考像素（reference pixel），不是屏幕上的物理发光点。浏览器按设备像素比（devicePixelRatio）自动换算：普通屏 1px = 1 个物理像素，2 倍 Retina 屏 1px = 2 个物理像素。所以你写的 1px 细线在高清屏上依然锐利——映射的事浏览器包了。

绝对单位速查：屏幕上只用 px
单位	含义	使用场景
px	CSS 参考像素	网页唯一常用，其余基本只出现在打印样式表
pt	磅，1pt = 1/72 英寸	打印文档、Word 字号
cm / mm	厘米 / 毫米	打印样式表
in	英寸，1in = 96px	打印样式表

px 是死数字：把 .px-b 的 width 改成 200px 看它精确变化；拖动浏览器窗口，三个盒子一像素都不会变

px 的优势是精确可控：边框、阴影、图标尺寸用它；但字号、间距全写死 px 会失去弹性——接下来的相对单位就是来解决这件事的。

五、相对单位用在布局上：% 到底相对谁

相对单位的关键永远是「相对谁」。百分比的答案分属性： width 的 % 相对父元素内容区宽度——好理解；但 padding 和 margin 的 %，连上下方向都按父元素的宽度算！这是 CSS 最著名的反直觉设计（好处是水平垂直能用同一把尺）。

百分比 % 参照系速查：最容易踩的坑一览
属性	% 相对谁	备注
width	父元素内容区宽度	最常见，符合直觉
padding（含上下）	父元素宽度	反直觉！纵方向也按宽度算
margin（含上下）	父元素宽度	同上，垂直 margin% 也看父宽
height	父元素高度	父元素必须有确定高度，否则失效
font-size	父元素字号	详见第 03 课

反直觉现场：把 .parent 的 width 改成 400px，child 的 padding-top 跟着变大——纵方向的 % 竟然按父宽度算

em 和 rem 也能用在布局属性上： em 相对元素自身的 font-size， rem 相对根元素（html）的 font-size（默认 16px）。至于它们在字号场景下的换算与选择，详见同章第 03 课《文本与字体》第二节——这里只看它们在布局上的表现：

把 .btn-em 的 font-size 改成 22px：它的 padding、圆角全部等比变大；旁边 rem 按钮纹丝不动

height: 50% 经常「无效」：父元素高度如果是被内容撑开的（auto），子元素的高度百分比就无从算起。要么给父元素定高，要么改用别的方式。

六、视口单位 vw / vh：拿浏览器窗口当尺子

视口（viewport）就是浏览器的可视区域。1vw = 视口宽度的 1%，1vh = 视口高度的 1%； vmin / vmax 取两者中较小 / 较大的那个。配上一句 clamp(最小值, 首选值, 最大值)，就能写出「随窗缩放但不失控」的流体字号。

视口单位速查：以可视区为尺
单位	含义	典型用途
vw	视口宽度的 1%	流体字号、通栏横幅
vh	视口高度的 1%	满屏 hero 区：`100vh`
vmin	vw、vh 中较小者	横竖屏切换都安全的尺寸
vmax	vw、vh 中较大者	较少用，特殊装饰

拖动实验台中间的分隔条：标题随预览区变宽而变大（6vw 生效）；副标题被 clamp() 锁死在 12~18px 之间

100vw 包含滚动条的宽度！页面出现纵向滚动条时，写 width: 100vw 会横向溢出几个像素。正文容器用 width: 100% 更安全。

七、calc()：混合单位的四则运算

calc() 让不同单位直接做加减乘除，最经典的场景是 「100% 减去一个定宽」——比如固定侧栏 + 弹性主栏的布局。语法红线：+ 和 - 两侧必须有空格，否则整条声明失效。

定宽侧栏布局：把 calc(100% - 176px) 里的 176px 改成 240px 看主栏变窄；删掉减号两侧的空格——整条声明直接失效

calc() 里改侧栏宽度时记得同步改算式——它不会读心。等学到 CSS 变量（var()），把 160px 抽成变量，侧栏改一处、算式自动跟随。

八、本章小结

颜色四写法等价：关键字、十六进制（#f80 = #ff8800）、rgb()、hsl()；调同色系深浅首选 hsl。
透明度四通道：rgba / hsla / 8 位 hex / transparent；只透颜色用它们，整体透明才用 opacity。
currentColor 跟随当前 color；border 省略颜色时默认值就是它。
px 是参考像素而非物理像素，高清屏映射交给浏览器。
反直觉重点：padding / margin 的 % 连上下方向都按父元素宽度计算。
em 跟自身 font-size 走，rem 只认根元素；非字号场景同样成立。
视口单位 vw / vh 做流体排版，clamp() 负责兜底上下限；100vw 小心滚动条。
calc() 混合单位运算，+ / - 两侧空格是语法红线。

动手练习：做一张「调色盘卡片」——用 hsl() 写同一色相的 5 个亮度阶梯色块（只改第三个参数），卡片边框与阴影不写颜色、全靠 currentColor；卡片宽度 calc(100% - 32px)，内边距用 4%—— 然后拖窄父容器，验证上下 padding 也跟着宽度一起缩水。