Aside 和 Main 必须同级并列，不能嵌套；正确结构为 header、nav、main、aside、footer 平级，main 仅出现一次，DOM 顺序体现内容优先级，CSS 控制视觉布局。
Aside 和 Main 必须同级，不能嵌套
这是语义错误的高发区。很多开发者为了“方便布局”，把 aside 放进 main 里再用 position: absolute 拉出来，结果屏幕阅读器会把侧边栏当成主内容的一部分，SEO 也会误判内容权重。
正确结构只有一种：header、nav、main、aside、footer 平级并列，且 main 只能出现一次。
-
main不能作为aside的父容器，也不能包在nav或header里 - 若页面有多个逻辑区块（如仪表盘双面板），需保留一个
main，其余用section+role="region"显式标注 - DOM 顺序必须体现内容优先级：
main应尽可能靠前，哪怕视觉上侧边栏在左——用 CSSorder或grid-column调整即可
Grid 布局下 Aside 宽度分配要防塌陷
Flex 布局里 aside 容易被 flex-shrink: 1 压成一条线；Grid 更可控，但得避开常见陷阱。
推荐写法是用 minmax() 而非纯 fr：
立即学习“前端免费学习笔记（深入）”；
.layout {
display: grid;
grid-template-columns: minmax(280px, 3fr) minmax(240px, 1fr);
gap: 1.5rem;
}
main { grid-column: 1; }
aside { grid-column: 2; }
-
minmax(240px, 1fr)保证窄屏下侧边栏不小于 240px，避免文字挤成一团 - 别混用
fr和固定像素（如240px）在同一行声明，计算逻辑会冲突 - 小屏断点改单列时，记得加
aside { order: -1; }把它提到顶部，而非用display: none—— 后者会让辅助技术直接跳过
响应式切换时 Aside 的 DOM 位置不能靠 JS 移动
有人用 JS 在小屏时把 aside 插入到 main 底部，看似省事，实则破坏语义连贯性：aria-labelledby 关联断裂、焦点流错乱、SSR 渲染不一致。
- 结构微调应由服务端或构建时完成，前端只负责样式切换
- 如果真需动态重组（如移动端折叠侧边栏），用
aria-hidden="true"+visibility: hidden替代display: none，保持 DOM 存在 - 所有媒体查询都应基于
min-width，移动优先；避免嵌套@media，否则中间断点容易漏掉
Main 区域的 max-width 设置影响阅读体验
main 没默认宽度，但设太宽会导致长段落阅读疲劳，设太窄又浪费桌面空间。关键不是“居中”，而是控制**可读行宽**。
- 推荐用
max-width: 72ch（不是 px），ch单位基于字符宽度，对字体缩放友好 -
margin-inline: auto比margin: 0 auto更精准，适配 RTL 语言 - 别给
main设height或min-height，它应随内容自然伸展；需要撑满视口时，用min-height: 100vh配合flex: 1父容器更稳妥
aside 一旦被当成装饰性容器用，后续所有响应式、可访问性、SEO 优化都会打折扣。 
