第 4 章 · CSS 选择器与盒模型
本章目标：掌握 CSS 引入、选择器、优先级与继承；理解盒模型、box-sizing、BFC；编写实用 reset；为 academy-demo 建立 css/base.css 美化全站。
学时建议：2.5 小时（含 50 分钟跟练与自检）
前置：第 1～3 章；academy-demo 已有 index、courses、register 页面。
4.1 引入 CSS 的三种方式
<link rel="stylesheet" href="css/base.css"> <!-- 推荐 -->
<style>h1 { color: #c2185b; }</style> <!-- 单页原型 -->
<p style="color: gray;">行内</p> <!-- 尽量避免 -->| 方式 | 场景 |
|---|---|
| 外链 | 项目默认，可缓存 |
<style> | 原型、Critical CSS |
| 行内 | 动态计算等极少数情况 |
4.2 基础与组合选择器
p { line-height: 1.6; } /* 元素 */
.card { border-radius: 12px; } /* 类 — 复用首选 */
#main { scroll-margin-top: 72px; } /* ID — 少用 */
nav a { text-decoration: none; } /* 后代 */
ul > li { list-style: none; } /* 子元素 */
h2 + p { margin-top: 0; } /* 相邻兄弟 */
input:focus-visible { outline: 2px solid #e91e8c; } /* 伪类 */| 选择器 | 含义 |
|---|---|
A B | 后代 |
A > B | 直接子元素 |
A + B | 紧邻兄弟 |
:hover / :focus-visible | 交互（键盘用 focus-visible） |
::before / ::after | 伪元素，需 content |
4.3 选择器优先级（特异性）
优先级：!important > 行内 style > ID > 类/属性/伪类 > 元素/伪元素| 选择器 | 特异性 |
|---|---|
p | 0,0,0,1 |
.card | 0,0,1,0 |
#hero .card p | 1,1,0,1 |
main p.intro { color: #334155; } /* 0,0,1,1 — 胜 */
p { color: #94a3b8; } /* 0,0,0,1 — 败 */原则：避免 ID 与 !important；组件用单一类 .btn-primary；勿过深嵌套。
4.4 继承
| 可继承 | 不可继承 |
|---|---|
color、font-*、line-height | margin、padding、border |
text-align | width、height、background |
body {
font-family: system-ui, "PingFang SC", sans-serif;
color: #334155;
line-height: 1.6;
}
.btn-link { color: inherit; font: inherit; }4.5 盒模型详解
┌──────────── margin ────────────┐
│ ┌──────── border ────────┐ │
│ │ ┌──── padding ────┐ │ │
│ │ │ content │ │ │
│ │ └─────────────────┘ │ │
│ └────────────────────────┘ │
└─────────────────────────────────┘.course-card {
width: 360px;
padding: 16px;
border: 1px solid #e2e8f0;
margin: 12px;
}4.5.1 content-box vs border-box
box-sizing | width 含义 |
|---|---|
content-box（默认） | 仅内容；padding/border 撑大总宽 |
border-box | 含 padding+border，易控宽 |
*, *::before, *::after { box-sizing: border-box; }width:200px; padding:20px; border:1px → content-box 总宽 242px；border-box 总宽 200px。
4.5.2 外边距折叠
相邻块级元素垂直 margin 取较大值而非相加。防止：父设 padding/border，或触发 BFC。
4.6 BFC（块级格式化上下文）
独立渲染区域，内外布局互不影响。
触发方式：
| 方式 | 示例 |
|---|---|
display: flow-root | 推荐 |
overflow 非 visible | overflow: auto |
float 非 none | 老方法 |
display: flex/grid | 现代布局 |
用途：
- 清除浮动：父
display: flow-root包裹 float 子元素 - 阻止 margin 折叠
- 自适应栏：左 float + 右
overflow:auto（BFC）
.course-list { display: flow-root; }
.sidebar { float: left; width: 240px; }
.main-column { overflow: auto; }