Flex容器实现侧边栏布局最稳定，主内容用flex:1自适应，侧边栏设固定宽；DOM顺序须为aside在前main在后，小屏下重置order保证可访问性。
用 flex 容器划分主内容与侧边栏，别用 float 或 position: fixed
Flex 是目前最稳的响应式侧边栏布局基础，float 在 Safari 中容易错位，position: fixed 会脱离文档流，导致 <main></main> 内容被遮挡、还得手动加 margin-left 补位——一改就崩。
正确做法是给外层容器设 display: flex，<aside></aside> 设固定宽（如 width: 240px），<main></main> 用 flex: 1 自适应剩余空间。桌面端默认横向排列，小屏下靠媒体查询切换行为。
- 想让侧边栏贴顶？加
position: sticky; top: 0，但必须确保父容器有高度（比如min-height: 100vh） - 避免在
<aside></aside>上直接写height: 100vh—— 它会截断长内容，且在 iOS Safari 中常触发滚动条错位 - 如果要用 Grid 替代 Flex，注意
grid-template-columns: 240px 1fr同样有效，但旧版 Safari 对subgrid支持差，不建议嵌套使用
移动端 DOM 顺序必须是 <main></main> 在前、<aside></aside> 在后
很多模板把 <aside></aside> 放在 HTML 开头，再用 CSS 的 order 拉到右侧——这会让键盘用户 Tab 十几次才进正文，屏幕阅读器也先读“相关文章”再读标题。
正确结构只能是：<main></main> 标签写在 <aside></aside> 前面，DOM 顺序即 tab 流顺序。桌面端用 order 调整视觉位置，小屏下重置为 order: 0，保证语义和交互一致。
立即学习“前端免费学习笔记（深入）”；
- 桌面右置侧边栏：给
<aside></aside>加order: 1，<main></main>保持默认order: 0 - 小屏断点内必须显式写
main, aside { order: 0; }，否则某些浏览器会继承旧值 - 千万别用
display: none隐藏<aside></aside>—— Flex 容器会塌陷，<main></main>不自动撑满；推荐组合：width: 0; overflow: hidden; flex-shrink: 0
小屏下隐藏侧边栏，用按钮控制显隐，JS 只做状态切换
媒体查询负责布局切换，JS 只负责切 class，不是必需项。很多项目一上来就写 element.style.left = "0"，结果键盘焦点丢失、读屏器无法感知状态变化。
标准做法是：小屏下默认 display: none 或用 width: 0 隐藏，点击按钮时只切换一个 class（如 is-open），所有样式由 CSS 控制。这样降级友好，调试也清晰。
- 按钮需同时监听
click和keydown，支持Enter和空格键触发 - 展开后立刻调用
document.querySelector('aside a').focus()，把焦点移到第一个链接 - 如果不用 JS，可用隐藏
<input type="checkbox" id="sidebar-toggle">+:checked ~ aside实现纯 CSS 抽屉效果，但无法保存状态或做动画补帧
导航语义必须用 <nav></nav> + <ul></ul>，别塞非导航内容
<nav></nav> 不是装饰性容器，它是给辅助技术和 SEO 明确信号：“这是主导航区”。中间插 <div> 会破坏语义链，导致 Tab 顺序跳过整个菜单、下拉失效、读屏器播报中断。
<p>常见错误是把 logo、搜索框、用户头像全塞进 <code><nav></nav>。这些非跳转内容应放在 <header></header> 或独立区域。多个侧边栏（如系统设置 + 快捷工具）要各自用独立 <nav></nav>，并加 aria-label 区分。
- 子菜单必须作为对应
<li>的直接子元素：<li> <a>设置</a><ul>...</ul> </li>，平级或外置写法会导致定位偏移、焦点丢失 - 每个
<a></a>必须设display: block，否则触控热区只有文字部分，移动端体验极差 - 如果侧边栏只是广告位或推荐文章，改用
<section></section>或<aside></aside>，<nav></nav>只留给有明确导航意图的结构
order 反转又没重置小屏，或者把非导航内容塞进 <nav></nav>，后续加键盘支持或读屏适配就会卡住。
