响应式布局的层次感源于语义容器职责分离与CSS模式匹配。header、nav、main等语义标签天然构成布局上下文，每层容器须明确自身CSS职责，避免混搭float/grid、冗余div或错误断点绑定。
响应式布局的“层次感”不是靠多套 div 堆出来的，而是靠语义容器职责分离 + CSS 模式匹配实现的。 一个 section 设了 display: grid，它的子元素却用 float 排列，这种混搭就是层次崩塌的起点。
语义标签本身就是第一层布局边界
浏览器对 header、nav、main、section、aside、footer 的默认 display 行为（块级、流式）不是偶然——它们天然构成尺寸与流式上下文的切换点。比如：
-
main是整页内容的主容器，适合设display: grid+grid-template-areas统筹 header/sidebar/content 三者关系 -
section是逻辑模块单元，内部用display: flex排卡片或列表更合理，它不负责跨区域协调 -
aside必须是main的兄弟，而非子元素；否则在 grid 中无法通过grid-area与main同级并列 - 把所有内容塞进一个
div class="container"再靠 CSS 硬掰，会让grid-template-areas失去语义锚点，也增加 margin 塌陷风险
每层容器必须明确自己的 CSS 模式职责
HTML 层级的本质，是提前声明“谁负责哪段空间分配”。不是所有容器都该用 grid，也不是所有 flex 容器都需要 wrap：
-
nav设display: flex+flex-wrap: wrap，是为了让导航项在窄屏自动换行；但若在里面再包一层div并设display: flex微调某一行对齐，就该改用grid-auto-rows或align-content -
section若只为了加 padding 和 background，且不参与任何布局控制，那它就不该存在——直接写在语义标签上，或用::before伪元素替代 - 绝对定位弹窗应挂载到
body下，而非某个深层section里；否则position: fixed可能被父级transform或overflow: hidden截断 - 现代布局不需要“为了结构而结构”：多一层
div就多一次盒模型计算、一次box-sizing继承风险、一个可能被意外裁剪的节点
响应式断点要绑定到有尺寸上下文的容器上
直接给 p 或 span 写 @media 规则，看似有效，但一旦内容由 JS 动态插入或 SSR 渲染顺序变化，样式就容易失效。真正可控的是结构容器的尺寸响应边界：
立即学习“前端免费学习笔记（深入）”；
- 优先在
main或section上设min-width/max-width，再用子选择器控制内部流式行为 -
picture+source media="(min-width: 768px)"这类 HTML 原生响应机制，比纯 CSS 的background-image更早触发、更省资源 - 避免在
img或button上写媒体查询——它们没有盒模型上下文，width/height无效，仅靠font-size或color很难维持视觉节奏 - 移动端优先写法：基础样式（小屏）直接写，不包
@media；大屏增强规则用@media (min-width: 768px)往上叠加，逻辑线性、覆盖可控
真正容易被忽略的，是“容器是否真的需要有自己的尺寸上下文”。比如 section 设了 width: 80%，又在里面用 grid，那 fr 单位就基于这个缩窄后的宽度计算——但如果你本意是让网格占满视口宽度，这个 width 就成了隐性干扰源。
