必须用transform: translatex()而非left或margin-left，因其走gpu合成层、不触发重排，保障60fps流畅；而left/margin-left强制同步布局计算，导致ios safari和低端安卓机卡顿、闪动甚至黄色警告。
为什么必须用 transform: translateX() 而不是 left 或 margin-left
直接改 left 或 margin-left 会强制浏览器同步计算布局（reflow），动画在 iOS Safari 和低端安卓机上明显卡顿，DevTools 里还会标黄警告 “forced synchronous layout”。transform: translateX() 走 GPU 合成层，不触发布局，滑动顺滑，语义也更准确——位移只作用于自身坐标系，不依赖父容器的定位上下文。
常见错误包括：
-
left: 0; transform: translateX(-100%)：部分 Safari 版本会忽略translateX，导致抽屉始终显示 - 侧边栏没设
position: fixed或position: absolute：translateX()可能影响文档流，主内容跳动 - 初始隐藏写成
transform: translateX(-300px)：硬编码宽度不响应式，推荐transform: translateX(-100%)（按视口宽度算）
纯 CSS 抽屉必须满足的 DOM 结构和选择器规则
依赖 input[type="checkbox"] 状态驱动样式时，结构错一点，:checked ~ .drawer 就完全不生效。
关键点：
-
input必须与抽屉容器（如.drawer）同级，且严格位于其**之前**；不能嵌套在label或div内 - 必须用
~（通用兄弟选择器），不能用+（相邻兄弟）——因为中间常有触发用的label -
input隐藏要兼顾可访问性：position: absolute; clip: rect(0 0 0 0); pointer-events: none;，而不是display: none - 遮罩层（
.overlay）必须是label元素，并设for指向同一input，否则点击无法关闭
Flex 布局下如何防止主内容区被挤压或错位
侧边栏用 Flex 实现抽屉时，主内容区突然变窄、留白、滚动失效，大概率是 Flex 收缩行为没控住。
正确做法：
- 侧边栏显式设
flex-shrink: 0，否则从0px拉伸到280px时，主内容会被压缩 - 主内容区用
flex: 1 1 0（即flex-grow: 1; flex-shrink: 1; flex-basis: 0），别用flex: auto或flex: 1（后者等价于flex-basis: 0%，某些浏览器解析不稳定） - 父容器必须设
min-height: 0，否则 Flex 子项默认min-height: auto会阻止收缩，导致高度塌陷 - 别把
display: flex直接加在body上，某些浏览器会干扰height: 100vh计算
抽屉打开时如何真正冻结背景页滚动
仅靠 body { overflow: hidden } 在 Safari 15+ 和部分 Android 浏览器中经常失效，用户仍可在抽屉上滑动，背景页同步滚动。
可靠方案：
- 抽屉打开时，给
body加 class（如drawer-open），CSS 中写：.drawer-open { position: fixed; width: 100%; height: 100%; overflow: hidden; } - 抽屉容器自身必须有
overflow-y: auto和明确高度（如height: 100vh或min-height: 100vh），否则长内容会被截断 - 若用 React/Vue，别在组件卸载/挂载时才切 class——DOM 还没更新就加 class，可能来不及拦截滚动事件
最易被忽略的是 min-height: 0 和 flex-shrink: 0 的组合，漏掉任一，Flex 布局就会在不同设备上表现不一致；而滚动冻结失败，往往是因为只改了 overflow 却没配 position: fixed ——这两处不调好，其他动画再顺滑也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
