flex布局最稳，table和float是坑；因table语义错误、可访问性差、响应式失效、滚动异常且维护困难，而flex需设height:100vh作参照，左栏flex:0 0 240px，右栏flex:1并加overflow:auto。

用 flex 布局搭导航结构最稳，table 和 float 是坑，别碰。

为什么不能用 table 做侧边栏+内容区

table 不是布局工具，它语义上表示数据关系，不是区域划分。实际写出来会遇到一堆问题：

• 屏幕阅读器把 <td> 读成“表格第1行第1列”，而不是“导航链接：用户管理” <li>缩放时文字挤出单元格，<code>colspan/rowspan 改一处，整个结构就错位
• 主内容区加 overflow-y: auto，滚动条常出现在整页，而不是内容区内部
• 想响应式折叠菜单？display: table-cell 在移动端几乎无法重排

flex 布局必须设 height: 100vh 才生效

很多人写了 display: flex 却发现 flex: 1 不起作用——根本原因是父容器没高度参照。常见错误写法：.main-content { flex: 1; }，但外层没设 height，浏览器不知道“1份”是多少。

• 外层容器（比如 或最外层 <div class="layout">）必须设 <code>height: 100vh
• 顶部导航固定高（如 60px），左侧菜单用 flex: 0 0 240px，主内容区用 flex: 1
• 避免给 <nav></nav> 或 <main></main> 加 position: absolute，它会脱离 flex 流，后续加滚动或媒体查询时容易崩

纯 CSS 实现菜单收起/展开的关键点

不用 JS 就能实现基础交互，靠的是 <input type="checkbox"> + 相邻兄弟选择器，但有几个细节不注意就会失效：


使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
下载

立即学习“前端免费学习笔记（深入）”；

• <input> 必须和菜单元素同级，且在它前面；否则 :checked ~ .sidebar 匹配不到
• 菜单初始宽度设 width: 240px，:checked ~ .sidebar 改为 width: 64px（只留图标）
• 菜单项文字要自动隐藏，得配合 overflow: hidden + white-space: nowrap，不能只靠 width 变化
• 加 transition: width 0.2s ease，否则切换生硬；别漏掉 box-sizing: border-box，不然 padding 会影响宽度计算

多级菜单缩进别用内联 style，用 ul ul 选择器

层级缩进如果靠 JS 动态加 style="padding-left: 48px"，后期维护和键盘导航都会出问题。真正可依赖的是嵌套结构 + CSS 选择器：

• HTML 用嵌套 <ul></ul>：<ul><li>系统管理<ul><li>角色管理</li></ul> </li></ul>
• CSS 写 ul ul { padding-inline-start: 24px; }，兼容 RTL，也避免外边距折叠干扰
• 展开动画用 max-height（比如 max-height: 500px），不用 height: 0 —— IE 不支持，且有 border/padding 时计算不准
• 所有子 <ul></ul> 默认设 overflow: hidden + max-height: 0，再加 transition: max-height 0.2s ease-in-out

最容易被忽略的是：缩进样式必须作用在 <ul></ul> 上，而不是 <li>；否则 max-height 动画过程中文字会“抽搐”。