overflow: hidden必须和width一起用，因它只对有明确尺寸约束的块级盒生效；无width时浏览器无法判断溢出边界，导致裁剪失效。
为什么 overflow: hidden 必须和 width 一起用
单纯设 width: 0 后图标还在原位、文字被裁但容器仍占空间——这不是 bug，是浏览器对 width 和文档流的默认处理。overflow: hidden 不是“装饰”，它强制截断超出边界的渲染，否则子元素（尤其是 position: absolute 的图标）可能溢出并干扰布局。
常见错误现象：
-
width: 0但没加overflow: hidden→ 图标或文字残影可见 - 用了
visibility: hidden或opacity: 0→ 容器仍在文档流中占位，主内容区不自动伸展 - 侧边栏内图标用了
float或absolute→ 收缩后脱离父容器约束，位置飘移
实操建议：
- 给侧边栏外层容器同时设置
width和overflow: hidden，二者缺一不可 - 图标用
display: flex+justify-content: center居中，避免依赖 margin/padding 计算 - 若图标是 SVG，确保其
width/height设为1em或16px等固定值，不随父容器 width 缩放失真
图标保留、文字隐藏的 CSS 控制逻辑
收缩时只留图标不显示文字，关键不是“删掉文字”，而是让它不参与布局计算且视觉不可见。靠 display: none 会中断过渡动画，靠 opacity: 0 又无法阻止文字撑宽容器。
推荐组合写法：
.sidebar-collapsed .nav-text { width: 0; opacity: 0; overflow: hidden; white-space: nowrap; }-
.sidebar-collapsed .nav-icon { flex-shrink: 0; }（防图标被 flex 压缩变形） - 文字包裹在
<span class="nav-text"></span>内，图标用<span class="nav-icon"></span>包裹，结构清晰便于类控制
注意：不要对 .nav-text 单独加 transition: opacity，它必须和 width 同步过渡，否则出现“先消失再缩”或“先缩再消失”的错拍。
flex 布局下 width 过渡失效的典型原因
在 display: flex 容器中直接对侧边栏设 width: 240px → width: 60px，动画可能卡顿或跳变——因为 flex 项默认有 min-width: auto，会抵抗 width: 0。
解决路径很明确：
- 把
width换成flex-basis：初始写flex: 0 0 240px，收缩时改为flex: 0 0 60px - 必须同步设
min-width: 0在侧边栏上，否则 flex 默认行为会覆盖 width 设置 - 主内容区要设
flex: 1且min-width: 0，否则长单词或表格可能撑破布局 - 避免在侧边栏上写
flex-shrink: 0，它会让flex-basis失去压缩能力
如果已用 Tailwind，对应类是 flex-[0_0_240px] → flex-[0_0_60px]，比手动切 w-60/w-16 更稳。
移动端折叠后汉堡菜单唤出的边界处理
小屏下侧边栏完全隐藏，但汉堡按钮点击后需以 fixed 覆盖层方式弹出——此时最容易忽略的是滚动穿透和焦点管理。
关键细节：
- 唤出时给
加overflow: hidden，防止背景页滚动 - 汉堡菜单容器用
position: fixed; top: 0; left: 0; width: 100%; height: 100%，但内部侧边栏仍需保持overflow: hidden和宽度控制逻辑一致 - 收起时记得移除
body的overflow: hidden，否则页面锁死 - 用
pointer-events: none控制遮罩层，避免误触背后内容；激活后切回pointer-events: auto
真正难的不是展开动画，而是收起瞬间的 DOM 状态清理：比如未清除的 transition 属性残留、transform 值未重置、或者 aria-expanded 属性不同步——这些都会让下一次点击行为异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
