应使用 nav 和 aside 明确语义边界：nav 专用于主导航链接，aside 用于辅助内容，二者同级、不可嵌套，需设 aria-label 或 role="navigation"；侧边栏用 flex: 0 0 240px 防缩放，主内容用 flex: 1；移动端折叠用 checkbox+label 实现，下拉菜单父 li 必须 position: relative。
用 nav + aside 明确语义边界，别直接套 div
很多侧边栏一动就错位，不是 CSS 写得不对，而是 HTML 结构没划清作用域。nav 表示主导航逻辑，aside 表示辅助内容区，两者语义不同、浏览器默认样式不同、可访问性处理也不同。混用或全用 div 会导致：CSS 的 flex 或 grid 布局计算异常、屏幕阅读器跳过导航、移动端焦点管理失效。
正确做法是：
-
nav仅包裹真正用于页面跳转的链接（如首页、产品、文档） -
aside用于放搜索框、标签云、最近更新等非主导航内容 - 两者都应设
role="navigation"或aria-label，避免被读屏器合并识别 - 不要把
nav嵌在aside里，也不要反过来——它们是同级容器，不是父子关系
Flex 布局中 min-width 和 flex-shrink 必须显式控制
侧边栏宽度固定但主内容要自适应时，display: flex 是最常用方案，但默认 flex-shrink: 1 会让侧边栏在小屏下被压缩变形，尤其文字+图标组合时容易换行错位。
关键设置：
- 侧边栏加
flex: 0 0 240px（禁止缩放、最小宽 240px） - 主内容区用
flex: 1，不写flex-grow别名，避免 IE11 兼容问题 - 设
min-height: 44px在所有可点击项上，满足 iOS/Android 最小触控区域要求 - 避免用
width: 240px单独设宽——它不阻止 flex 缩放，也不响应父容器变化
移动端折叠靠 input[type="checkbox"]，不是 JS 或 display: none
纯 CSS 实现点击展开/收起侧边栏，唯一可靠方式是用原生表单控件模拟开关状态。写个 div class="hamburger" 配 JS，JS 加载失败就永远不可用；直接写 display: none 则无法配合 transition 做动画。
实操要点：
-
input必须放在label前，用for关联，确保点击区域 ≥ 44px - 侧边栏容器设
max-height: 0; overflow: hidden;，而非display: none - 触发时靠
input:checked ~ .sidebar设max-height: 400px（数值需略大于实际内容高度） - 别用
max-height: fit-content——CSS 不支持该值做过渡，动画会失效
下拉菜单定位失效，大概率是父级没设 position: relative
侧边栏里嵌二级菜单时，常见现象是子菜单飘到页面顶部或右侧空白处，不是 CSS 写错了，而是父 li 没设定位上下文。
必须遵守的链路：
- 每个带下拉的
li要加position: relative - 子
ul设position: absolute; top: 100%; left: 0; - 避免用
top: 100%; margin-top: -1px修缝隙——高 DPI 屏幕下仍可能有 1px 错位，改用transform: translateY(100%)更稳 - 如果侧边栏本身用了
position: fixed，子菜单也要继承同一 stacking context，否则滚动时会脱离锚点
nav 标签漏掉 aria-current，或一个 li 忘了设 position: relative，都可能让整套交互在特定设备上静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
