CSS：层叠、盒模型与布局
规则与选择器
CSS 是样式表语言。规则由选择器和声明块组成，声明写为 属性: 值;。外部文件适合共享样式，在 HTML 的 head 引入：
<link rel="stylesheet" href="styles.css">/* styles.css */
body { font-family: system-ui, sans-serif; }
.note { color: #253858; }
.note > strong { color: #a32020; }
input[required] { border-color: #667; }
button:hover { background: #eee; }
button:focus-visible { outline: 3px solid #185adb; }元素、类、属性、伪类选择器用于选中元素；空格是后代关系，> 是直接子元素，逗号合并多个选择器。不要为了提高优先级不断叠加 ID。
层叠与继承
同一元素同一属性有多个候选值时，浏览器先比较规则来源与重要性、层叠层等，再比较选择器优先级，最后比较作用域接近程度和出现顺序。不能简单说“行内样式永远最高”或“后写总覆盖前写”。详见 MDN 层叠说明。
在同一来源、层级、重要性等条件相同的常见情况中，ID 高于类/属性/伪类，高于元素/伪元素。!important 会改变层叠优先级，先用开发者工具定位冲突，再考虑是否必要。
文字颜色和字体通常继承，边框与布局尺寸通常不继承。用 inherit 显式继承，用 initial 回到初始值，用 unset 按该属性是否继承决定行为。
盒模型与尺寸
元素外部尺寸由内容、内边距、边框、外边距共同影响。border-box 让声明的宽度包含 padding 和 border，便于布局计算。
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 1rem; }
.card {
max-width: 48rem;
margin: 0 auto;
padding: 1rem;
border: 1px solid #ccd;
}
img { max-width: 100%; height: auto; }rem 相对根元素字号，% 的参照因属性而异，vh/vw 相对视口。不要把所有尺寸写死为像素；也不要把 % 一概解释为父元素宽度。
Flex、Grid 与响应式
Flex 适合一维排列，Grid 适合行列布局。先有正常文档流，再逐步增强；绝对定位会脱离正常流，通常不作为整页布局的起点。
给 HTML 示例的 main 添加 class="page"，即可配合以下样式：
:root { --gap: 1rem; --accent: #185adb; }
.page { display: grid; gap: var(--gap); }
nav { display: flex; flex-wrap: wrap; gap: var(--gap); }
section { min-width: 0; padding: 1rem; border: 1px solid #ccd; }
input { max-width: 100%; }
@media (min-width: 48rem) {
.page { grid-template-columns: 2fr 1fr; }
}窗口较窄时单列，达到断点后双列。断点由内容是否拥挤决定，不按设备型号罗列。
常用函数与边界
| 用途 | 示例 | 说明 |
|---|---|---|
| 颜色 | rgb(24 90 219 / 80%)、hsl(210 60% 40%) | 明确颜色和透明度 |
| 长度计算 | calc(100% - 2rem)、min(100%, 48rem)、clamp(1rem, 2vw, 2rem) | 值需符合所在属性的语法 |
| 变换 | transform: translateX(1rem) rotate(5deg) | 变换顺序影响结果，不重新排布正常流 |
| 渐变 | background: linear-gradient(to right, white, #dde) | 渐变是一种图像 |
| 资源 | url("./image.png") | 外部 CSS 中相对路径相对样式表文件 |
| 自定义属性 | var(--accent, blue) | 提供未定义变量时的后备值 |
| 环境与内容 | env(safe-area-inset-bottom, 0px)、content: attr(href) | 按属性与浏览器支持判断适用范围 |
lighten、darken 以及接收颜色参数的 saturate($color, $amount) 是 Sass 等预处理器中的颜色函数。原生 CSS 也有滤镜函数 filter: saturate(150%)，它处理渲染结果，不能混同为 Sass 调色函数。image()、element()、paint() 等也不能假定所有目标浏览器都支持；需要时查具体兼容性，而不是整组当作通用能力。
验证与练习
先给 HTML 中一个 section 添加 class="card"，给记录列表中的一个 li 添加 class="note"，再在浏览器检查 .card 的盒模型与计算样式；把窗口缩窄到 320px，确认没有意外横向滚动。删除 .note 的颜色声明后观察该记录的继承与回退，再给按钮添加清晰的键盘焦点样式。继续读 JavaScript。
参考核对
在border-box下，.card的声明宽度包含两侧padding与border，margin仍在外部；窄屏单列来自媒体查询未命中，双列仅在48rem及以上生效。删除.note颜色声明后查看继承链，不能预设一定变黑。焦点可使用上文button:focus-visible规则，通过Tab而非仅鼠标悬停核对轮廓；320px下若仍溢出，先查看实际超宽元素及其最小尺寸。
深入课程已接续：层叠层与固有尺寸。基础内容与旧锚点保留，按当前路线进入完整机制和实践。