主内容区和侧边栏需语义清晰、布局稳定、响应友好：主内容用唯一<main>，侧边栏用同级<aside>；Flex布局控制宽度，移动端垂直堆叠；内容归属明确，避免滥用<section>。
主内容区和侧边栏的划分，核心是语义清晰、布局稳定、响应友好。不能只靠视觉位置决定结构，得从 HTML 语义和 CSS 行为两个层面协同设计。
用对语义标签，先定角色再布局
主内容必须包裹在 <main> 标签内，且全页只能有一个；侧边栏必须用 <aside>，且它得和 <main> 同级，或作为其兄弟元素——不是子元素。别把 <aside> 塞进 <main> 里，那会破坏语义层级，影响 SEO 和读屏器识别。导航栏（<nav>）建议放在 <header> 内或紧随其后，属于页面级导航，不归入主内容流。
Flex 布局控制宽度，别依赖 float 或 width 硬设
现代做法是用 display: flex 在一个外层容器（比如 <div class="layout"> 或直接用 <main> 包裹两者）中并排安排 <main> 和 <aside>：
- <main> 设 flex: 3（占约75%），承载文章列表、摘要、分页等核心内容
- <aside> 设 flex: 0 0 min(240px, 100vw)，既保证最小可用宽度，又防止小屏溢出
- 务必加 flex-shrink: 0，否则默认收缩会导致侧边栏被压缩甚至消失
移动端要“断开”并列，改用垂直堆叠
小屏幕下强行左右并排体验差。用媒体查询切换布局：
立即学习“前端免费学习笔记（深入）”；
- 当视口宽度 ≤ 768px 时，让外层容器改为 flex-direction: column
- <aside> 可设 order: -1 提前渲染（比如放在 Banner 下、文章列表前），更符合阅读动线
- 避免用 display: none 彻底隐藏侧边栏——如果需要收起，应配合 inert 属性、aria-hidden="true" 和 transform: translateX(-100%)，确保辅助技术与键盘焦点同步处理
内容归属要明确，别滥用 <section>
博客首页的文章列表本身不需要每篇都套一层 <section>。按时间顺序罗列的独立文章，直接用 <article> 即可。<section> 适用于有统一主题的分组，比如“编辑推荐”“系列连载”这类带小标题的聚合区块。侧边栏里的“热门文章”“分类列表”可各自用 <section> 包裹，但前提是它们内部有明确标题（<h2> 或更高阶），否则纯属冗余。
