原理是用:checked伪类配合复选框作为开关，通过相邻/兄弟选择器控制侧边栏样式；需确保复选框位于侧边栏前序兄弟位置，常用~选择器；动画需避开display:none，改用transform、max-height或opacity；移动端须添加遮罩层防止点击穿透；响应式需结合媒体查询在桌面端常驻侧边栏并隐藏触发按钮。
用 :checked 配合复选框控制侧边栏显隐的原理
核心在于把 <input type="checkbox"> 作为“开关”，利用其 :checked 状态 + 相邻/兄弟选择器（+ 或 ~）触发后续元素样式变化。它不依赖 JS，纯 CSS 实现，但必须确保 HTML 结构中复选框是侧边栏元素的前序兄弟（或同级且可被 ~ 覆盖）。
常见错误是把复选框放在侧边栏内部、或位置太靠后，导致选择器失效——:checked + .sidebar 只能选中紧挨着的下一个兄弟，而 :checked ~ .sidebar 可选中之后所有符合条件的兄弟，更宽松也更常用。
display: none 和 visibility: hidden 切换时的关键区别
别直接用 display: none 做过渡动画，它无法被 CSS transition 捕获（值为离散类型）。想加滑动/淡入效果，得换思路：
- 用
max-height配合 overflow-hidden 控制展开收缩（适合固定高度范围） - 用
transform: translateX(-100%)移出视口，再配合transition实现平滑滑入 - 用
opacity+pointer-events: none实现淡入+禁用交互，但注意opacity: 0仍占布局空间
例如：默认侧边栏设 transform: translateX(-100%);，:checked ~ .sidebar 改为 transform: translateX(0);，再加 transition: transform 0.3s ease 即可。
移动端点击穿透与遮罩层的必要性
纯 :checked 方案在移动端有个典型问题：用户点开侧边栏后，背后内容仍可滚动、按钮仍可点击——因为复选框本身没阻止事件冒泡，也没遮挡底层。
解决方法是在复选框激活时，用兄弟选择器同时显示一个全屏遮罩：
<input type="checkbox" id="toggle"><label for="toggle">☰</label> <div class="overlay"></div> <aside class="sidebar">...</aside>
然后写：
#toggle:checked ~ .overlay {
opacity: 0.6;
pointer-events: auto;
}
#toggle:checked ~ .sidebar {
transform: translateX(0);
}
.overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: #000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
注意：.overlay 必须在 HTML 中位于复选框之后、且和 .sidebar 同级，才能被同一个 ~ 选中。
响应式断点与桌面端常驻的兼容处理
侧边栏在桌面端通常应常驻显示，只在小屏折叠。不能只靠 :checked 控制，得结合媒体查询：
- 默认（小屏）下，侧边栏用
position: fixed+transform折叠 - 在
@media (min-width: 768px)中，重置侧边栏为position: static、宽度固定，并忽略:checked的隐藏逻辑 - 同时把触发按钮（如 ☰ 图标）设为
display: none，避免干扰桌面布局
关键点：媒体查询中的样式优先级会覆盖普通规则，所以桌面端即使复选框被勾选，.sidebar 也不会隐藏——前提是你的断点规则写在后面，或使用足够具体的选择器。
容易忽略的是，:checked 状态在窗口缩放时不会自动重置。如果用户在桌面宽屏下点了开关又切到手机尺寸，可能发现侧边栏初始就是展开的。稳妥做法是给复选框加 checked 属性并用 JS 在 resize 时重置，但纯 CSS 场景下，接受这个“状态残留”更现实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
