纯CSS实现侧边栏收缩的关键在于布局结构稳固而非仅依赖transition：父容器必须用display: flex或grid，侧边栏需“四定”（position/top/bottom/width），配合flex-basis、min-width: 0、overflow: hidden及transform: translateX()替代width动画，避免重排与错位。
纯 CSS 实现侧边栏收缩，关键不在“怎么动”，而在“怎么不崩”——布局结构没搭对，transition 再顺也会卡顿、跳位、响应式错乱。
父容器必须用 display: flex 或 display: grid
靠 float、inline-block 或手动 margin-left 同步主内容宽度，是绝大多数翻车的起点。它们无法自动响应侧边栏尺寸变化，一缩放就错位，一换屏就重写。
-
display: flex最适合两栏（侧边 + 主内容）：父容器设display: flex，侧边栏用flex: 0 0 240px（不伸展、不收缩、固定基宽），主内容用flex: 1 -
display: grid更适合三区（顶栏 + 侧边 + 主内容）：推荐grid-template-rows: 64px 1fr 48px+grid-template-columns: 240px 1fr，再配min-height: 100vh防塌陷 - 若侧边栏是
position: fixed，主内容不能靠margin-left推开，得用padding-left补位，否则滚动时会漏出空白
侧边栏自身定位与尺寸控制要“四定”
所谓“四定”，是指 position、top、bottom、width 必须全部显式声明，尤其在 fixed 场景下缺一不可。
- 错误写法：
position: fixed; top: 64px; left: 0;→ 漏掉bottom和width，高度塌缩、宽度撑开 - 正确写法：
position: fixed; top: 64px; left: 0; bottom: 48px; width: 240px; - 收缩时别只改
width：配合flex-basis（如flex: 0 0 60px）+min-width: 0，避免 flex 容器覆盖 width 过渡 - 必须加
overflow: hidden，否则width过渡中内容会溢出、裁切异常
收缩动画选 transform: translateX() 而非 width 的真实原因
不是“translateX 更酷”，而是它不触发重排、不干扰文档流、GPU 加速稳定——尤其在低端设备或复杂 DOM 下，width 动画极易卡顿甚至跳帧。
-
transform: translateX(-100%)是安全值，不依赖具体像素；left: -300px在响应式下容易失效 - 侧边栏必须是
position: fixed或position: absolute，否则transform会把主内容挤动 - 移动端必须加
touch-action: pan-y到侧边栏上，否则手势滑动会和页面滚动冲突 - 遮罩层
.overlay要和侧边栏同级、z-index介于主内容与侧边栏之间，否则点不到按钮或遮不住背景
状态记忆用 checkbox hack 而非 JS 的硬性前提
刷新后保持展开/收起状态，不用 JS 存 localStorage，靠的是 input[type="checkbox"] 原生持久化能力——但结构必须严格满足条件，否则失效。
-
必须放在 DOM 最前，紧挨着 - 被控元素（如
.sidebar）必须是它的后续兄弟节点，用:checked ~ .sidebar选择 - 折叠态建议用
display: none，而非opacity: 0或visibility: hidden—— 后两者仍占 tab 键序和布局空间 - 同步加上
tabindex="-1"和aria-hidden="true"，否则键盘用户会聚焦到不可见菜单项
真正难的从来不是写那几行 transition，而是让侧边栏在缩放时既不抢主内容位置、也不被滚动影响、还不在小屏上点不着——这些细节一旦漏掉一个，整个交互就从“顺滑”变成“诡异”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
