checkbox方案适合静态页、SEO敏感或防JS失效场景，因其用:checked伪类天然提供布尔状态，无需事件监听或DOM状态维护，但需正确HTML结构、ID关联、媒体查询优先级处理及少量JS实现滚动锁和遮罩关闭。
为什么用 checkbox 而不是 JavaScript 控制显隐
纯 CSS 方案适合静态页面、SEO 敏感场景或需规避 JS 加载失败风险的项目。checkbox 的 :checked 伪类天然提供布尔状态，无需监听事件或维护 DOM 状态，也避免了媒体查询与 JS 类名冲突的问题。
HTML 结构必须满足父子/相邻关系
checkbox 必须能通过 CSS 选择器影响侧边栏元素，常见写法是把 <input type="checkbox"> 放在侧边栏前，并用 ~（通用兄弟选择器）控制；或用 +（相邻兄弟）配合按钮触发。错误结构如 checkbox 在 body 深层嵌套、侧边栏不在同级容器内，会导致样式不生效。
-
<input id="sidebar-toggle" type="checkbox">必须有id，且不能被display: none或visibility: hidden隐藏（可用opacity: 0; position: absolute;替代） - 侧边栏需紧跟 checkbox，或在同一父容器下，否则
#sidebar-toggle:checked ~ .sidebar不匹配 - 按钮标签需用
for="sidebar-toggle"关联，确保点击可聚焦并触发状态切换
@media + :checked 组合断点逻辑要分清优先级
媒体查询决定“是否启用 checkbox 控制”，而 :checked 决定“当前是否展开”。两者不能混用：小屏下应默认隐藏侧边栏，只在 checkbox 选中时显示；大屏下则应直接显示，忽略 checkbox 状态。若在 @media (max-width: 768px) 内写 .sidebar { display: none; }，再用 :checked 设为 block，会因层叠顺序导致失效——因为媒体查询规则优先级高于伪类。
- 正确做法：默认设
.sidebar { display: none; }，再用@media (min-width: 1231px) { .sidebar { display: block; } }启用桌面端自动显示 - 移动端展开逻辑只在窄屏下生效：
@media (max-width: 1230px) { #sidebar-toggle:checked ~ .sidebar { display: block; transform: translateX(0); } } - 务必给侧边栏加
position: fixed; top: 0; left: 0; z-index: 1000;，否则可能被主内容遮盖
动画要用 transform 而非 left，且需防滚动穿透
用 left 动画会触发 Layout，造成卡顿；iOS Safari 下尤其明显。同时，侧边栏展开后若允许背景滚动，用户划动时会“透底”，体验断裂。
立即学习“前端免费学习笔记（深入）”；
- 初始状态：侧边栏设
transform: translateX(-100%); opacity: 0;，配合transition: transform 0.3s ease, opacity 0.2s ease; - 展开时：
#sidebar-toggle:checked ~ .sidebar { transform: translateX(0); opacity: 1; } - 展开后立即给
<body>加overflow: hidden;，收起时移除——这步必须用 JS 实现，纯 CSS 无法操作 body - 遮罩层（backdrop）建议用独立
<div class="backdrop">，并绑定click到document，防止点击空白处不关闭
