一、盒模型（Box Model）
核心规则：
- 所有元素都是矩形盒子，由内向外：
content→padding→border→margin。 box-sizing: border-box;让width/height包含padding+border，避免溢出。建议全局设置。
常见问题：
- 设置
width: 100%再加padding出现横向滚动条 → 检查是否缺少box-sizing: border-box。 - 两个块级元素上下
margin重叠（取最大值） → 这是正常折叠，可用flex/grid或padding代替。
二、Flex 布局（一维）
核心属性（容器）：
| 属性 | 作用 | 常用值 |
|---|---|---|
display: flex | 开启弹性布局 | |
flex-direction | 主轴方向 | row（默认）、column |
justify-content | 主轴对齐 | flex-start、center、space-between |
align-items | 交叉轴对齐 | stretch（默认）、center、flex-start |
flex-wrap | 是否换行 | wrap、nowrap |
gap | 子项间距 | 10px、20px |
核心属性（子项）：
flex: 1→ 等分剩余空间（flex-grow: 1; flex-shrink: 1; flex-basis: 0%）。align-self→ 覆盖父级align-items。
常见问题：
- 为什么
gap在space-between下看起来没效果？ →space-between已经分配了剩余空间，gap仅在剩余空间不足时明显。 - 为什么子项不换行？ → 检查
flex-wrap: wrap是否设置，以及子项宽度是否超过容器。 - 为什么
margin: auto在 Flex 中能实现居中？ →auto会吸收剩余空间。
三、Grid 布局（二维）
核心属性（容器）：
| 属性 | 作用 | 常用值 |
|---|---|---|
display: grid | 开启网格布局 | |
grid-template-columns | 定义列宽 | 200px 1fr 200px、repeat(3, 1fr) |
grid-template-rows | 定义行高 | auto 1fr auto |
gap | 网格线间距 | 10px 20px（行 列） |
justify-items / align-items | 单元格内对齐 | center、stretch |
核心属性（子项）：
grid-column: 1 / 3→ 从第 1 条列线跨越到第 3 条（占两列）。grid-row: span 2→ 占两行。
常见问题：
fr是什么？ → 剩余空间的比例单位，类似flex: 1。- 如何实现响应式网格（每行自动填充）？ →
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
四、定位（Position）
| 值 | 参照物 | 是否脱离文档流 | 常用场景 |
|---|---|---|---|
relative | 自身原位置 | 否（保留占位） | 作为绝对定位的容器、微调位置 |
absolute | 最近的已定位祖先 | 是 | 浮层、角标、弹窗 |
fixed | 视口 | 是 | 固定导航栏、返回顶部按钮 |
sticky | 父容器滚动区域 | 混合（滚动到阈值时固定） | 吸顶表头、侧边栏 |
常见问题：
absolute元素不按预期定位 → 检查父级是否设置了position: relative。sticky不生效 → 父容器高度必须大于sticky元素，且不能有overflow: hidden。
五、常见布局坑点速查
| 现象 | 可能原因 | 解决方案 |
|---|---|---|
| 图片/视频超出父容器 | 缺少 max-width: 100%; height: auto; | 添加该样式 |
行内元素（如 <span>）无法设置宽高 | 默认 display: inline | 改为 inline-block 或 block |
| 两个按钮之间有看不见的间隙 | 换行/空格产生的空白字符 | 父容器 font-size: 0 或子元素 margin: 0，或使用 flex + gap |
position: fixed 元素宽度异常 | 固定定位元素宽度默认由内容撑开 | 显式设置 width 或 left/right |
| 移动端点击元素出现灰色背景 | -webkit-tap-highlight-color | 设置 -webkit-tap-highlight-color: transparent |
六、调试技巧
-
浏览器开发者工具（F12）：
- Elements 面板：选中元素 → Styles 可临时勾选/修改属性，Computed 看最终值。
- 盒模型图：Styles 面板底部可看
margin/border/padding具体数值。 - 布局面板（Layout）：查看 Grid/Flex 线框。
-
临时添加调试样式：
* { outline: 1px solid red !important; } /* 显示所有元素边界 */ -
使用 AI 辅助：
- 粘贴代码 + 截图，问“为什么这个按钮没居中？”
- 要求“解释这段 CSS 各行的作用”
七、学习建议
- 不要背诵，而是理解规则间的组合关系。
- 遇到问题先推演：主轴上用什么对齐？交叉轴呢？是否需要换行？
- 小步验证：写最小示例（一个容器 + 三个色块），修改属性看实时效果。
最后：把这页速查卡保存下来，遇到布局问题时先对照排查。90% 的样式问题都能在这里找到方向。
