4.1颜色的四种写法
同一个陶土红，四种表达：关键字、十六进制、rgb()、hsl()。
#B04A2C
十六进制
最常用
最常用
rgb(176,74,44)
RGB 函数
三通道 0-255
三通道 0-255
hsl(14,60%,43%)
HSL 函数
调亮暗最直观
调亮暗最直观
rgba(...,.55)
半透明
第四位 0-1
第四位 0-1
.sw1 { background: #B04A2C; } /* 十六进制 */
.sw2 { background: rgb(176,74,44); } /* 等价的 RGB */
.sw3 { background: hsl(14,60%,43%); } /* 色相14° 饱和60% 亮度43% */
.sw4 { background: rgba(176,74,44,.55); } /* + 55% 透明 */
/* hsl 的好处：色相不变，
只调第三个数字就能出
同色系的深浅层次 */十六进制支持缩写：#FF0000 可写 #F00。设计稿取色一般直接给 #RRGGBB，粘过来就能用。
4.2绝对单位与相对单位
px 是死尺寸；% 跟着父元素走；em 跟着自己字号走；rem 跟着根元素走。
width: 160px（定死）
width: 50%（父元素的50%）
width:12em · font-size:12px → 实际 144px
width: 12rem → 恒等于 192px
.u-px { width: 160px; } /* 绝对：屏幕上量多少就是多少 */
.u-pct { width: 50%; } /* 相对父元素宽度 */
.u-em { width: 12em; } /* 相对「自己」的 font-size
(12px × 12 = 144px) */
.u-rem { width: 12rem; } /* 相对根元素 html 的 font-size
(16px × 12 = 192px，全站统一) */
/* 拖窄窗口试试：px 不动，
% 跟着容器缩 */经验：字号用 rem、组件内间距用 em、宽度栅格用 %，做响应式才不乱。
4.3em 与 rem 的取值现场
1.5em 和 1.5rem 差在哪？em 会「继承父级的字号」再放大，rem 永远锚定根字号。
父元素 font-size: 16px
font-size: 1.5em → 若父级是 16px，我就是 24px；父级若变大，我也跟着膨胀
font-size: 1.5rem → 永远是 16×1.5 = 24px，谁也影响不了我
套两层嵌套列表用 em 会「指数放大」，用 rem 才稳。
/* em：相对「父元素（继承来）的字号」 */
.em-p { font-size: 1.5em; }
/* rem：相对根元素 html 的字号，
默认 16px */
.rem-p { font-size: 1.5rem; }
/* em 的经典翻车：
嵌套 li 里 font-size:0.8em
一层套一层，越套越小 */老项目改版常用一招：html{font-size:62.5%} 让 1rem = 10px，方便心算。
4.4CSS 变量：一键换肤看三个色块同一套变量
把颜色存进 --变量，:root 定义全站用，局部重定义就是「换主题」。
标题和按钮颜色都来自 --td-brand。
同一套 CSS，只换了三个变量的值。
这就是网站的深色模式原理。
/* 1. 在 :root 里定义（全局可用） */
:root {
--td-brand: #B04A2C; /* 主色 */
--td-bg: #FFFDF8; /* 底色 */
--td-ink: #2B2520; /* 文字色 */
}
/* 2. 处处引用 */
.theme-demo .bar { background: var(--td-brand); }
.theme-demo .body { background: var(--td-bg); }
.theme-demo p { color: var(--td-ink); }
/* 3. 换肤 = 换变量值，
用到它的地方全部跟着变 */
.theme-demo.sw2 {
--td-brand: #3F6E6A;
--td-bg: #EFF5F3;
--td-ink: #23403D;
}本站顶栏的「深色模式」按钮，就是用 JS 切换 data-theme 属性 + 一组变量实现的，原理一模一样。
4.5calc()：让单位之间做算术
百分比和像素能直接加减——「比容器窄 80px」这种需求一行的写完。
width: calc(100% - 80px)
虚线框多宽，我就比它窄 80px —— 拖动窗口看它自适应
虚线框多宽，我就比它窄 80px —— 拖动窗口看它自适应
/* 百分比 - 像素，混算合法 */
.card {
width: calc(100% - 80px);
}
/* 常见用途：自适应 + 固定侧栏 */
.main {
width: calc(100% - 240px); /* 扣掉侧栏 */
}
/* 注意：减号两边必须有空格！
calc(100%-80px) 是非法的 */calc() 也能乘除数字，如 calc(100% / 3) 三等分——不过布局任务交给第 8 章的 Flex/Grid 更省心。