CSS：选择器、盒模型与布局系统

这一课你将能做到

1. 写出现代 CSS 选择器，精准命中页面中的任意元素
2. 用盒模型、flex 和 grid 三种方式控制元素的大小和位置
3. 搭建一个完整的响应式页面，包含媒体查询和基础过渡动画

为什么要学

HTML 搭好了骨架，但所有网站都是「素颜」的白纸黑字。CSS 负责颜色、间距、排版、位置，也负责让同一套代码在手机、平板、电脑上看起来都对劲。不会 CSS，你就只能做出 90 年代的网页。

对初学者来说，CSS 的坑在于：它看起来很简单（就是改样式），但背后有层叠、优先级、盒模型、定位上下文等多个独立维度互相干扰。很多初学者写的样式「为什么不生效」或「为什么多了一像素」，本质上是对盒模型和层叠理解不到位。

先建立图像

浏览器把每个 HTML 元素都渲染成一个矩形盒子。盒子的构成从外到内：

┌─────────────────────────────────┐
│           margin（外边距）       │
│  ┌─────────────────────────────┐│
│  │       border（边框）         ││
│  │  ┌───────────────────────┐  ││
│  │  │     padding（内边距）  │  ││
│  │  │  ┌─────────────────┐  │  ││
│  │  │  │   content       │  │  ││
│  │  │  │   宽 × 高        │  │  ││
│  │  │  └─────────────────┘  │  ││
│  │  └───────────────────────┘  ││
│  └─────────────────────────────┘│
└─────────────────────────────────┘

默认情况下你写的 width 和 height 只是 content 区域。CSS3 引入了 box-sizing: border-box，让 width/height 直接代表整个可见盒子的大小——这是现代开发的标准做法。

跟着做

步骤 1：重置默认样式并理解盒模型

新建 style.css，写入：

/* 让所有元素按 border-box 计算，现代项目标配 */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid #333;
    margin: 15px;
    background-color: #f0f0f0;
}

在 index.html 中引入：

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">内容区</div>
</body>

.box 的总渲染宽度是 200px（width）+ 0 padding/border/margin 不算入，因为用了 border-box。删掉 box-sizing 行再试，宽度会变成 250px（200 + 20×2 + 5×2），这就是标准盒模型的经典陷阱。

步骤 2：选择器层级练习

/* 1. 元素选择器 */
h1 {
    color: #1a1a1a;
}

/* 2. 类选择器 */
.card {
    background: white;
    border-radius: 8px;
}

/* 3. ID 选择器 */
#hero {
    min-height: 400px;
}

/* 4. 后代选择器：nav 里的所有 a */
nav a {
    text-decoration: none;
}

/* 5. 子选择器：ul 的直接子 li */
ul > li {
    list-style: none;
}

/* 6. 相邻兄弟 */
h2 + p {
    margin-top: 0.5rem;
}

/* 7. 伪类 */
a:hover {
    color: #e63946;
}

li:nth-child(odd) {
    background: #f8f9fa;
}

/* 8. 伪元素 */
h1::after {
    content: "!";
    color: #e63946;
}