页面结构混乱的根源在于未正确运用CSS布局语义：需通过display: grid/flex建立容器隔离，配合尺寸约束与间距节奏；grid-template-areas提升可读性，但要求元素为直接子级；避免冗余div，优先使用语义化标签与display: contents精简渲染树。
页面结构混乱是因为缺少视觉层次的 CSS 布局锚点
不是写得越多越清晰，而是没用对 display、grid 或 flex 的层级语义。浏览器默认把所有块级元素当平铺容器，不主动划分区域边界，人眼就找不到阅读路径。
真正起作用的是「容器隔离」+「尺寸约束」+「间距节奏」三者配合。比如一个卡片区域，光靠 margin 不够，得先用 display: grid 定义它是个独立布局上下文，再用 gap 控制内部呼吸感。
-
display: block是默认值，不产生新布局上下文，无法约束子元素流向 -
display: flex适合一维排列（行或列），但子项会拉伸/压缩，容易破坏内容自然高度 -
display: grid更适合二维区域划分，尤其搭配grid-template-areas可读性高
用 grid-template-areas 快速建立可读的结构骨架
比纯数字定位更直观，尤其适合首页、仪表盘这类有明确区块命名的页面。浏览器会自动把命名区域映射到实际 DOM 元素，只要类名匹配即可，不用写重复的 grid-area。
.layout {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 200px 1fr 300px;
}
<p>.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }注意：所有参与 grid-template-areas 的元素必须是直接子元素；如果中间插了 wrapper 层，布局会断开。
立即学习“前端免费学习笔记（深入）”；
Flex 布局里 align-items 和 justify-content 混用导致错位
常见错误是给父容器同时设 justify-content: center 和 align-items: center，结果所有子项被挤到视口中央——这不是布局，是覆盖。真正的结构控制要分层：外层用 Flex 排列区块，内层用 padding/margin 控制内容位置。
- 只在需要“居中某个组件”时才用
align-items+justify-content - 区块间留白优先用
gap（Flex/Grid 都支持），比margin更可控、不触发 margin collapse - 文字与图标并排时，用
align-items: flex-start避免基线对齐错位
嵌套过深的 div 让 CSS 选择器失控
结构乱的根源常不在 CSS，而在 HTML 套了太多无意义 div。比如 <div class="container"><div class="row"><div class="col">... 这种写法会让 .container .row .col 选择器越来越长，改一个样式可能影响其他地方。
解法是用语义化标签替代无意义容器，并通过 display: contents 切断渲染树（但保留 DOM 结构）：
.card-header {
display: contents;
}
/* 此时 .card-header 不再生成盒模型，子元素直接受父 card 的 grid/flex 控制 */不过要注意：display: contents 会让该元素失去背景、边框、padding 等样式，也不能响应事件——只适合纯结构包装层。
真正难的不是写出整齐的 CSS，而是判断哪一层该由 HTML 定义结构，哪一层该由 CSS 控制呈现。多数时候，多一个 <section> 比多一个 div 类名更可靠。
