应使用 ，因其语义明确、专为导航设计，对屏幕阅读器友好且被主流框架默认采用； 易被误读为附属内容，损害 seo 和可访问性。
左侧菜单用 <aside></aside> 还是 <nav></nav>？
用 <nav></nav>。它语义明确，专为导航设计，对屏幕阅读器友好，且被主流框架（如 Bootstrap、Ant Design）默认采用。用 <aside></aside> 容易被误读为附属内容，SEO 和可访问性都打折扣。
常见错误：把整个菜单容器写成 <div class="menu">，丢掉语义；或嵌套多层无意义 <code><div> 导致 DOM 深度增加、CSS 选择器难维护。
<ul>
<li>菜单项用 <code><a></a> 标签（即使单页应用也要保留 href 属性，比如 href="#/users"），避免只靠 onclick + JS 跳转 —— 否则键盘用户无法 Tab 切换、浏览器前进/后退失效
aria-current="page"，比仅靠 CSS 类更可靠data-collapsed="true" 控制，而非切换 class 名，方便 JS 统一读取右侧内容区域怎么避免重绘和路由闪烁？
关键不是“放什么”，而是“怎么换”。直接用 innerHTML = newHTML 或频繁销毁重建组件，会触发重排重绘、丢失焦点、中断表单输入。
典型场景：点击“用户管理”菜单后，右侧突然白屏半秒再渲染 —— 很可能是每次点击都重新 fetch 模板或初始化 Vue/React 实例。
- 静态结构用
<main></main>包裹，配合role="main"提升可访问性 - 单页应用中，用原生
history.pushState()+popstate监听，配合Element.replaceChildren()替换内容节点（比innerHTML更轻量） - 如果用框架，确保路由组件启用
keep-alive（Vue）或memo+ 状态外置（React），别让表单输入框每次切换就清空 - 加载中状态不要只靠一个
loading...文字，至少给容器设固定最小高度，防止布局跳动
flex 布局做主框架时 width/height 怎么设才不塌？
塌的原因几乎都是父容器没给明确尺寸约束。Flex 本身不解决“高撑满视口”问题，height: 100% 在多层嵌套下极易失效。
错误写法：html, body { height: 100%; } .app { display: flex; } .aside { width: 200px; } .main { flex: 1; } —— 如果 .app 没设 height: 100vh，.main 的 flex: 1 就没参照物。
- 根容器必须设
height: 100vh或min-height: 100vh，别依赖百分比继承 - 菜单区域推荐用
flex-basis: 240px+flex-shrink: 0，防止缩放时被压缩变形 - 内容区用
overflow-y: auto，但要确保其父容器有明确高度（比如.app设了height: 100vh，.main设了flex: 1） - IE11 兼容需加
-ms-flex前缀，且避免用flex: 0 0 auto这类简写，拆成三个属性更稳
菜单收起后图标文字怎么对齐又不重叠？
纯 CSS 实现收起态时，图标居中、文字隐藏，但很多方案用 display: none 切换导致布局抖动，或用 opacity: 0 占位却影响点击热区。
真正稳定的方案是：文字始终存在，但用 transform: translateX(-100%) 移出可视区 + overflow: hidden 截断，图标用 margin: 0 auto 居中。
- 收起时给菜单项加
data-collapsed="true"，CSS 写[data-collapsed="true"] .menu-text { transform: translateX(-100%); } - 图标容器设
width: 48px固定宽，text-align: center，避免文字隐藏后图标偏移 - 过渡动画只作用于
transform和width，别对display或visibility做 transition —— 它们不触发重绘，动画无效 - 移动端要考虑触摸热区：收起后图标点击区域至少 44×44px，可用
padding扩展，别只靠图标本身大小
Tab 键，焦点不该落在不可见的文字上，得用 tabindex="-1" 动态控制。这点连不少成熟 UI 库都处理得不彻底。
