纯css侧边栏抽屉必须用input[type="checkbox"]+ :checked配合兄弟选择器~实现，因其原生支持无障碍、键盘操作且不依赖js；结构上input与.drawer须同级，遮罩需为label并占满视口，动画需在默认状态定义transition。
纯 CSS 实现侧边栏抽屉，input[type="checkbox"] 是最可靠的状态开关——它天然支持点击、空格键触发、屏幕阅读器识别，且无需 JS 初始化就能工作。但结构稍有偏差，整个逻辑就完全失效。
为什么必须用 input[type="checkbox"] + :checked 而不是其他方式
用 input[type="checkbox"] 是因为它的状态切换是原生、无障碍、可聚焦、可键盘操作的；:checked 伪类能直接响应状态变化，比监听 click 或依赖 JS class 切换更底层、更稳定。一旦 JS 加载失败或被禁用，input 方案依然可用。
-
display: none的input仍可被label[for]关联并触发，不影响功能 - 不能用
input[type="radio"]（单选无法“关”）或input[type="button"]（无状态） - 别用
div[aria-pressed]配合 JS 切换——这需要额外管理焦点、键盘逻辑和 a11y 属性，纯 CSS 做不到
input 和抽屉容器必须同级且用 ~ 连接
DOM 结构错误是此方案失效的第一大原因：input 和 .drawer 必须是同一父元素下的平级兄弟节点，否则 :checked ~ .drawer 选择器根本匹配不到。
- ✅ 正确：
<input id="menu"><label for="menu"></label><div class="drawer"></div> - ❌ 错误：
<label><input id="menu"><div class="drawer"></div></label>（父子关系，~失效） - ❌ 错误：
<input id="menu"><div><div class="drawer"></div></div>（非同级，中间隔了嵌套） - 必须用
~（通用兄弟），不能用+（相邻兄弟）——+要求.drawer紧跟在input后面，中间不能有任何空白、注释或其它标签
如何让 :checked 触发位移动画而不是突变
动画不生效，往往不是 CSS 写错了，而是过渡属性没落在默认状态上，或者位移基准出错。
-
transition: transform 0.3s ease必须写在.drawer的默认样式里（即未勾选时），不能只写在:checked ~ .drawer中 - 位移值推荐用
transform: translateX(-100vw)而非-100%——-100%按父容器宽度算，而父容器可能是 flex 容器或 body，宽度不可控；-100vw确保彻底滑出视口左边界 - 抽屉容器必须设
position: fixed或absolute，否则transform可能影响文档流，导致主内容跳动 - 加
backface-visibility: hidden或will-change: transform（可选）可缓解 iOS Safari 动画残留偏移问题
遮罩层 .overlay 必须是 label 且占满视口
遮罩不是装饰，它是关闭入口和防穿透的关键节点；写成普通 div 就等于放弃一次点击关闭的能力。
-
.overlay必须是<label for="menu"></label>，而非<div class="overlay"></div>——只有label点击才能翻转input状态 - CSS 中需设
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，用100%会按父容器高度计算，常导致下半截不可点 -
z-index要略低于抽屉（如抽屉z-index: 1000，遮罩z-index: 999），否则遮罩盖不住抽屉内容，背后按钮仍可点 - 加
cursor: pointer，某些安卓 WebView 下没这个样式会导致点击响应迟钝
真正难的不是让抽屉滑出来，而是它关掉后焦点没回到触发按钮、Tab 键顺序断开、屏幕阅读器无法感知状态变更——这些纯 CSS 无能为力，必须靠 aria-expanded、aria-controls 和 JS 的 focus() 配合完成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
