第 2 周总结：CSS 基础 — 从"毛坯房"到"精装修"
蜗牛往上爬 · 前端工业可视化学习笔记 第 2 周总结
本周从零学习了 CSS 基础三件套：选择器（指哪打哪）、盒模型（每个元素都是盒子）、层叠与优先级（样式冲突时谁说了算）。用 6 天时间，把上周的 HTML “毛坯房"装修成了有渐变、阴影、圆角的"精装房”。
目录
一、本周学了什么
知识图谱
CSS 基础
├── 引入方式
│ ├── 内联样式（style 属性）
│ ├── 内部样式表（<style> 标签）
│ └── 外部样式表（<link> 引入）
│
├── 选择器（"指哪"）
│ ├── 基本：标签 / .class / #id / *
│ ├── 组合：后代(空格) / 子代(>) / 并集(,) / 交集(紧挨)
│ ├── 伪类：:hover / :focus / :first-child / :last-child
│ └── 属性选择器：[attr] / [attr="value"]
│
├── 盒模型（"打哪"的核心）
│ ├── 四层：content → padding → border → margin
│ ├── box-sizing：content-box vs border-box
│ ├── 宽高：width / max-width / min-height
│ ├── 边框：border / border-radius
│ └── 阴影：box-shadow
│
├── 背景与渐变
│ ├── 纯色：background-color
│ ├── 图片：background-image / repeat / position / size
│ └── 渐变：linear-gradient(方向, 色1, 色2, ...)
│
├── 文字样式
│ ├── font-family / font-size / font-weight / color
│ ├── line-height（推荐无单位值）
│ └── text-align / text-decoration / text-indent
│
├── 层叠与优先级
│ ├── 权重：!important > 内联(1000) > id(100) > class(10) > 标签(1) > *(0)
│ ├── 三条原则：同权重后来居上 / 不同权重高者胜 / !important 碾压一切
│ └── 调试：F12 Styles 面板 → 被划线的 = 被覆盖
│
└── 继承与重置
├── 会继承：color / font-* / line-height / text-align
├── 不继承：width / height / margin / padding / border / background
└── 重置：* { margin:0; padding:0; box-sizing:border-box; }
二、三个练习页面回顾
练习 1：样式化设备信息登记页
用时：Day 1-2，约 2 小时
用到的知识点：三种引入方式、标签/class/后代选择器、:hover/:focus 伪类
关键代码：
header { background: #1a3a5c; color: white; }
header a { color: #8ecae6; }
header a:hover { color: #ffb703; }
input:focus { border-color: #1a3a5c; box-shadow: 0 0 4px rgba(26,58,92,0.3); }
button:hover { background: #2a5a8c; }
收获：理解了"样式 = 选择器选中 + 属性赋值"的核心模式，:hover 和 :focus 是交互体验的起点。
练习 2：设备卡片
用时：Day 3-4，约 2 小时
用到的知识点：盒模型、padding/margin 简写、border-radius、文字样式
关键代码：
* { box-sizing: border-box; }
.device-card {
width: 280px;
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
}
收获：盒模型是 CSS 布局的基石，border-box 让一切计算变简单。用 F12 Computed 面板能直观看到四层结构。
练习 3：美化版设备卡片
用时：Day 5-6，约 2 小时
用到的知识点：渐变背景、box-shadow、继承、伪类悬停、权重
关键代码：
body { background: linear-gradient(135deg, #1a3a5c, #2d6a4f); }
.device-card { box-shadow: 0 8px 30px rgba(0,0,0,0.3); border-radius: 16px; }
.card-header { background: linear-gradient(135deg, #219ebc, #023047); }
.btn-detail:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(2,48,71,0.4); }
收获：渐变 + 圆角 + 阴影 = 从"能用"到"好看"。理解了层叠：body 设全局字体，组件设局部覆盖，互不干扰。
三、认知升级：学 CSS 前 vs 学 CSS 后
四、本周踩过的坑
五、CSS 核心模型速记
盒模型速记
┌──── margin ────┐
│ ┌── border ──┐ │
│ │ ┌ padding ┐│ │
│ │ │ content ││ │
│ │ └─────────┘│ │
│ └────────────┘ │
└────────────────┘
padding：内容到边框的"呼吸空间"margin：盒子之间的"外部间距"border-box：width包含padding和border
优先级速记
!important → 无敌（慎用）
style="..." → 1000
#id → 100
.class :hover → 10
p div → 1
* → 0
同权重 → 后来居上。不同权重 → 高的胜。
选择器速记
标签 → h1 → 所有 h1
.class → .card → 所有 class="card"
#id → #main → id="main"
后代(空格) → .nav a → nav 里的所有 a
子代(>) → .nav > a → nav 的直接子 a
并集(,) → h1, h2 → h1 和 h2 一起
交集(紧挨) → p.card → 带 card 类的 p
六、自测清单
全部打勾再进入下一周。
[ ] 能默写 CSS 语法规则
[ ] 能说出三种 CSS 引入方式及各自适用场景
[ ] 能写出标签、class、id、通配符四种基本选择器
[ ] 能写出后代、子代、并集、交集四种组合选择器
[ ] 能使用
:hover、:focus伪类[ ] 能画出盒模型四层结构（content/padding/border/margin）
[ ] 能解释
content-box和border-box的区别，并全局使用border-box[ ] 能写出
padding和margin的简写（1-4 个值）[ ] 能写出
border-radius和box-shadow[ ] 能使用
linear-gradient渐变背景[ ] 能说出哪些 CSS 属性会继承、哪些不会
[ ] 能计算简单选择器的权重，判断冲突时谁生效
[ ] 3 个练习页面全部完成并在浏览器验证
[ ] 每日博客文章 1 篇（共 3 篇）+ 本篇周总结 = 4 篇完成
七、下周预告
第 3 周：Flex 布局
下周将进入 CSS 布局的核心——Flex 弹性布局。如果说盒模型是"单个盒子怎么算大小"，Flex 就是"多个盒子怎么排队"。
预计学习内容：
Flex 核心概念：主轴与交叉轴
容器属性：
flex-direction/justify-content/align-items/flex-wrap/gap项目属性：
flex-grow/flex-shrink/flex-basis/order/align-self经典布局：水平导航栏、圣杯布局、卡片列表
动手练：用 Flex 做水平导航栏 + 完整的企业信息展示页。
📎 本文为"蜗牛往上爬"学习博客系列 · 阶段 0（HTML+CSS）第 2 周 · 总结篇