用 display: grid 划分 header、sidebar、main、footer 等主区域，配合 grid-template-areas 和 grid-area 快速建立清晰布局；调试时用 outline 替代 border 避免盒模型干扰，模块内一维排列优先用 flex；先以 background-color 占位暴露结构问题，再细化样式。
用 display: grid 快速切出主模块区域
页面结构复杂，本质是 DOM 层级深、语义模糊、样式相互干扰。与其一上来就调 margin 和 float，不如先用 display: grid 把大块“地理分区”划出来——比如 header、sidebar、main、footer。Grid 的 grid-template-areas 能让你像写地图一样定义布局，视觉反馈即时，改错成本低。
实操建议：
- 给
body或最外层容器设display: grid和grid-template-areas，例如：grid-template-areas: "header header" "sidebar main" "footer footer";
- 每个子元素通过
grid-area对应名称，如header { grid-area: header; } - 避免在模块内部立刻嵌套 Grid；先稳住一级结构，再逐个模块细化
- Chrome DevTools 的 Layout 面板里勾选 “Grid” 可直接看到区域边框，比反复刷新看效果快得多
给每个模块加临时 outline 而不是 border
border 会改变盒模型尺寸，导致布局微移、对齐错乱，越调越懵；outline 不占空间、不触发重排，纯视觉辅助，适合快速定位模块边界。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 加了
border: 1px solid red后，main宽度突然变窄，文字换行 - 多个模块间出现 1px 缝隙，查半天发现是
border-box没统一
实操建议：
- 全局加一条调试规则：
* { outline: 1px dashed #00f; }，再逐个模块覆盖掉不需要的，比如img { outline: none; } - 用不同颜色区分层级：
header { outline: 2px solid #f00; }、main { outline: 2px solid #0a0; } - 调试完立刻删掉或注释掉，避免误提交
模块内优先用 flex 而非嵌套 grid
一个 sidebar 里有标题、列表、按钮，用 display: flex 垂直堆叠或水平排列，比再套一层 grid 更轻量、更可控。Flex 天然处理项目对齐、间距分发、换行逻辑，且兼容性远好于复杂 Grid。
使用场景判断：
- 一维排列（横或竖）→ 选
flex - 二维网格（多行多列+跨区）→ 才考虑模块内
grid - 需要响应式重排顺序（比如移动端把侧边栏压到底部）→
flex-direction+order比媒体查询改 Grid 区域高效
参数差异注意点：
-
flex: 1在父容器没设高度时可能无效，需确保父容器有明确height或min-height -
align-items: stretch是默认值，常被忽略导致子项高度不一致
别急着写具体样式，先用 background-color 占位
很多卡壳发生在“不知道这个 div 到底占了多大”。比起反复切图、量像素、猜 width，直接给每个模块设高对比色背景，一眼看清实际渲染范围。
实操建议：
- 用易识别又不刺眼的颜色：
header { background: #ffeb3b; }、main { background: #e0f7fa; } - 颜色用十六进制，避免命名色（如
red）在不同浏览器渲染差异 - 如果某模块背景没显示出来，说明它没内容、没高度、或被
overflow: hidden截断——这是比样式错位更底层的问题 - 配色不用追求美观，目的是暴露结构问题；一旦确认尺寸和位置无误，立刻清空
background-color
真正难的不是怎么写 CSS，而是怎么让结构“看得见”。先把模块变成有轮廓、有颜色、有区域名的实体，后面填内容、调细节、做响应式，才不会在迷宫里绕圈。
