HTML + CSS + JavaScript 快速入门（二）：CSS 详解（2026 年视角）
这是系列第二讲，我们把 CSS（Cascading Style Sheets）讲透。
CSS 的核心使命：控制 HTML 元素的视觉呈现（颜色、间距、大小、布局、动画等）。
2025–2026 年的现代 CSS 已经非常强大：Flexbox + Grid + Container Queries + Subgrid + Cascade Layers 等特性让“纯 CSS 实现复杂响应式布局”变得现实。
1. CSS 引入方式对比（日常选择）
| 方式 | 写法示例 | 适用场景 | 推荐度（2026） |
|---|---|---|---|
| 内联样式 | <h1 style="color:red;"> | 快速测试、邮件模板、动态 JS 注入 | ★☆☆☆☆ |
内部样式（<style>） | <style> body { margin:0; } </style> | 单文件演示、组件库 demo | ★★☆☆☆ |
| 外部样式表（推荐） | <link rel="stylesheet" href="styles.css"> | 几乎所有真实项目 | ★★★★★ |
| CSS 模块 / Scoped | （框架内：CSS Modules、Styled Components、Vanilla Extract） | 大型组件化项目 | ★★★★☆ |
现代推荐：始终使用外部 .css 文件 + <link>，并考虑 PostCSS / Tailwind / UnoCSS 等工具链。
2. CSS 选择器速查（高频 Top 15）
| 选择器类型 | 示例 | 优先级 | 说明 |
|---|---|---|---|
| 元素 | p | 1 | 所有段落 |
| 类 | .card | 10 | 最常用 |
| ID | #header | 100 | 慎用（特异性太高） |
| 属性 | [type="checkbox"] | 10 | 表单常用 |
| 后代 | .card p | — | 所有后代 p |
| 子元素 | .card > p | — | 直接子元素 |
| 相邻兄弟 | h2 + p | — | 紧跟 h2 的第一个 p |
| 通用兄弟 | h2 ~ p | — | h2 后面的所有 p |
| :hover / :focus | a:hover | — | 交互状态 |
| :nth-child(n) | li:nth-child(odd) | — | 隔行变色经典 |
| :not() | :not(.active) | — | 排除 |
| :has() | .card:has(img) | — | 2023+ 超级强大（父选择子） |
| [data-*] | [data-theme="dark"] | 10 | 自定义属性常用 |
3. 盒模型（Box Model）——必须彻底搞懂
现代项目几乎都用 box-sizing: border-box;（全局设置）
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
border-box vs content-box 对比：
- content-box（默认，老思维）：width = 内容宽度，实际占用 = width + padding + border
- border-box（现代标配）：width = 内容 + padding + border 的总宽度
4. 现代布局核心：Flexbox vs Grid（2026 共识）
| 特性 | Flexbox | CSS Grid | 什么时候选谁？（2026 建议） |
|---|---|---|---|
| 维度 | 1维（行或列） | 2维（行+列） | — |
| 典型场景 | 导航栏、卡片内容对齐、居中 | 整体页面布局、画廊、表单网格 | — |
| 对子元素控制 | 非常灵活（grow/shrink/order） | 精确轨道（fr / minmax / auto） | — |
| 嵌套友好 | 好 | 一般（但 Subgrid 2025–2026 解决） | — |
| 响应式切换容易度 | ★★★★★ | ★★★★☆ | Flex 更宽容 |
| 浏览器支持 | 100% | 100%（Subgrid ~92–98%） | — |
一句话决策口诀：
- “内容对齐 / 一维排列 → Flexbox”
- “二维网格 / 显式行列 → Grid”
- “两者结合” 是最常见模式（Grid 做页面骨架，Flex 做组件内部）
Flexbox 经典写法（背下来）
.container {
display: flex; /* 或 inline-flex */
flex-direction: row; /* row | column | row-reverse */
justify-content: center; /* 主轴对齐 */
align-items: center; /* 交叉轴对齐 */
gap: 1.5rem; /* 子元素间距（最常用） */
}
.item {
flex: 1 1 200px; /* grow shrink basis */
/* 简写：flex-grow flex-shrink flex-basis */
}
Grid 经典写法（2026 推荐）
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
/* 或者显式： 1fr 1fr 1fr; */
}
.card {
/* 子元素可自行定位 */
grid-column: span 2; /* 跨列 */
}
5. 响应式设计（Responsive Design）核心技巧
2026 年主流策略（mobile-first + container queries 趋势）
- Mobile-first + media queries
.card {
padding: 1rem;
}
@media (min-width: 768px) {
.card {
padding: 2rem;
font-size: 1.125rem;
}
}
- Container Queries（组件级响应式，2023–2026 大杀器）
.card-container {
container-type: inline-size; /* 声明容器 */
}
@container (min-width: 400px) {
.card {
flex-direction: row;
align-items: center;
}
}
- 优点：组件真正可复用，不依赖页面宽度
- 支持度：2026 年已 >95%，可放心用
6. 常见实用属性速查（日常 Top 20）
| 属性家族 | 高频属性示例 | 备注 |
|---|---|---|
| 文字 | color, font-size, font-weight, line-height, text-align | — |
| 间距 | margin, padding, gap | gap 是 flex/grid 神器 |
| 边框 | border, border-radius | border-radius: 9999px → 圆形 |
| 背景 | background-color, background-image, background-size: cover | — |
| 阴影 | box-shadow: 0 4px 6px rgba(0,0,0,0.1) | neumorphism / glassmorphism 常用 |
| 定位 | position: relative / absolute / sticky / fixed | — |
| 显示 | display: none / block / flex / grid / contents | contents 很有用 |
| 溢出 | overflow: hidden / auto | — |
| 过渡/动画 | transition: all 0.3s; transform | will-change: transform 优化 |
7. 现代 CSS 最佳实践（2026 年写代码心态）
- 默认 mobile-first
- 优先用
rem/em/ch/vw等相对单位 - 全局重置：
box-sizing: border-box; margin:0; padding:0; - 颜色：用
oklch()/color-mix()（更感知均匀） - 层叠控制：用
@layer（cascade layers）管理特异性 - 组件化思维：一个组件尽量自包含样式（container queries 助力）
- 性能：避免
float、::before大量伪元素、!important滥用
8. 练习建议 & 下一讲预告
本周小目标：用纯 HTML + CSS 复刻 3 个常见组件
- 居中卡片（Flex/Grid 两种写法）
- 响应式导航栏（mobile hamburger → desktop horizontal）
- 产品卡片列表（auto-fit + minmax + container query 变体）
工具推荐：VS Code + Live Server + CSS Peek 插件 + Firefox/Chrome DevTools（Grid/Flex inspector 超好用）
下一讲预告（HTML + CSS + JS 快速入门（三））：JavaScript 基础详解
- 变量 / 函数 / 数组 / 对象
- DOM 操作入门
- 事件监听
- 现代写法（箭头函数、解构、模块）
你现在是想重点练习布局（Flex/Grid/Container Queries），还是想看某个具体组件的完整代码示例（比如响应式卡片、暗黑模式切换、表单美化）？
告诉我你的需求，我可以直接给出代码 + 解释。
