4、CSS基础回顾：选择器、盒模型、Flexbox布局、Grid布局、响应式设计入门
说实话，很多做界面移植的同学，最后卡住的地方往往不是框架本身，而是CSS基础不牢。你想想看，一个盒模型没搞明白，布局就歪了；选择器权重算不清，样式就覆盖乱了。这一章，我把最核心的四个知识点串一遍，都是我在实际项目中踩过坑的地方。
4.1 选择器：你写对了吗？
选择器是CSS的入口。写不对选择器，后面的布局全是白搭。我个人习惯把选择器分成三类：基础选择器、组合选择器、伪类/伪元素。
| 类型 | 示例 | 说明 |
|---|---|---|
| 基础 | div、.class、#id |
标签、类、ID选择器 |
| 组合 | div p、div > p、div + p |
后代、子代、相邻兄弟 |
| 伪类 | :hover、:nth-child(2) |
状态或位置匹配 |
| 伪元素 | ::before、::after |
生成额外内容 |
.class 比 #id 大，其实不是。权重规则是：内联样式（1000）> ID（100）> 类/伪类/属性（10）> 元素/伪元素（1）。!important 是核武器，能不用就别用，否则后期维护你会想哭。
4.2 盒模型：布局的基石
每个HTML元素都是一个盒子。这个盒子由四部分组成：content、padding、border、margin。我刚开始做界面移植时，经常被盒模型搞晕——明明设了宽度，结果元素比预期大了一圈。
原因很简单：默认的 box-sizing: content-box 下，你设的宽度只算content，padding和border是额外加的。后来我养成了一个习惯：
/* 全局重置盒模型 */
*, *::before, *::after {
box-sizing: border-box;
}这样设了宽度就是总宽度，省心多了。你想想看，如果每个元素都要手动算一遍padding和border，那效率得多低。
4.3 Flexbox布局：一维布局利器
Flexbox解决的是「一行或一列」里的排列问题。说白了，就是让子元素在主轴和交叉轴上灵活分布。我做过一个后台管理系统，左侧菜单、右侧内容区，用Flexbox几分钟就搞定了。
核心就两个属性：
- 容器属性：
display: flex、flex-direction、justify-content、align-items - 项目属性：
flex、align-self、order
举个例子，一个水平居中的导航栏：
.nav {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.nav-item {
flex: 0 0 auto;
}这里 gap 是后来才支持的，以前得用margin。我个人建议能用gap就用gap，代码更干净。
flex-wrap: wrap，结果子元素换行后，交叉轴对齐全乱了。后来发现，换行后需要配合 align-content 来控制多行的对齐，而不是 align-items。这两个属性容易搞混，切记。
4.4 Grid布局：二维布局王者
Grid是二维布局，行和列一起控制。Flexbox适合「一行或一列」，Grid适合「整个页面或复杂区域」。我做一个仪表盘页面时，用Grid划分了顶部导航、左侧菜单、右侧内容、底部状态栏，代码量比用Flexbox少了三分之一。
核心用法：
.grid-container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 60px 1fr 40px;
gap: 10px;
}
.header { grid-column: 1 / -1; }
.sidebar { grid-row: 2 / 3; }
.main { grid-row: 2 / 3; }
.footer { grid-column: 1 / -1; }你看，用 grid-column 和 grid-row 就能精确控制每个元素的位置。比用float和定位方便太多了。
| 特性 | Flexbox | Grid |
|---|---|---|
| 维度 | 一维（行或列） | 二维（行和列） |
| 适用场景 | 导航、列表、居中 | 页面布局、仪表盘 |
| 内容驱动 | 是（子元素大小影响布局） | 否（容器定义轨道） |
| 浏览器支持 | 极好 | 现代浏览器良好 |
4.5 响应式设计入门
响应式设计的核心就三个字：适配。不同屏幕尺寸，展示不同布局。我最早做响应式时，以为就是加几个媒体查询，结果发现远远不够。
三个关键点：
- 流式布局：用百分比、
vw、vh、rem代替固定px - 媒体查询：断点设置（一般三个：手机、平板、桌面）
- 弹性图片：
max-width: 100%让图片不溢出容器
一个典型的响应式布局：
.container {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.container {
grid-template-columns: 1fr 1fr 1fr;
}
}嗯，这里要注意：媒体查询的断点不要死记硬背。我一般根据内容自然换行的位置来定断点，而不是用固定的设备尺寸。你想想看，iPhone每年尺寸都在变，追设备尺寸是追不完的。
4.6 知识体系总览
下面这张图，把本章的核心知识点串起来了。你可以把它当作一个快速索引，哪里不会看哪里。
这张图里，选择器、盒模型、Flexbox、Grid是四个基础模块，它们共同支撑起响应式设计。我在做界面移植时，经常回头看看这张图，确认自己有没有遗漏某个知识点。