纯CSS模态框的核心是用:checked伪类配合label触发checkbox状态切换，input必须位于label前且id与for属性严格一致，推荐用~选择器定位同级.modal元素并使用display:none彻底隐藏。
用 :checked + label 触发模态框显示隐藏
纯 CSS 模态框的核心是把 checkbox 的勾选状态当作开关，不依赖 JS 就能控制显隐。关键不是“怎么写样式”，而是“怎么让点击触发状态切换”。input[type="checkbox"] 默认隐藏，用 label[for] 或包裹 label 关联它，用户点 label 就等于点 checkbox —— 这步漏掉，整个逻辑就断了。
常见错误现象：modal 一直显示或完全不出现，多半是因为 checkbox 没被正确触发，或者 :checked 后续选择器写错了层级。
- 必须确保
input在 DOM 中位于label前面（否则部分 iOS Safari 不响应） -
label的for属性值要和input的id完全一致，大小写敏感 - 模态框元素必须和
input处于同一父级，或用~（通用兄弟选择器）定位；不能跨多层嵌套用+ - 移动端需加
cursor: pointer到label，否则某些安卓浏览器点击无反馈
移动端适配：避免 focus 闪动与缩放失灵
iOS Safari 点击 checkbox 会触发默认 focus 样式（蓝边框），还可能意外放大页面。这不是 bug，是它的默认行为，但对模态框体验很破坏。
使用场景：用户在小屏上点“打开弹窗”按钮，结果页面跳一下、放大一点、边框一闪 —— 全部因为没压制原生焦点表现。
立即学习“前端免费学习笔记（深入）”；
- 给
input[type="checkbox"]加outline: none和position: absolute; left: -9999px（比display: none更安全，后者会让 :checked 失效） - 在
meta viewport中确认有user-scalable=no（慎用）或至少minimum-scale=1.0, maximum-scale=1.0 - 给
label加-webkit-tap-highlight-color: transparent，关掉点击高亮 - 如果模态框内有表单控件，首次聚焦时仍可能缩放，此时需在
input/textarea上单独加font-size: 16px（iOS 最小可读字号）
:checked ~ .modal 和 :checked + .modal 怎么选
区别不在“哪个高级”，而在 HTML 结构是否允许。+ 只能选紧邻的下一个兄弟元素；~ 可选后面所有同级元素。实际写的时候，结构松散些更稳妥。
参数差异：用 + 时，.modal 必须紧跟在 input 后面，中间不能插其他标签；用 ~ 就宽松得多，适合把按钮和模态框分开放（比如按钮在 header，模态框在 body 底部）。
- 推荐优先用
~，容错性高，维护时移动.modal位置不用改 CSS - 如果用
+却没生效，先检查 HTML 是否真“紧邻”——空格、换行、注释在某些旧浏览器里也算节点 - 不要试图用
:checked控制非兄弟元素（比如父级或子级），CSS 选择器做不到
为什么不能只靠 visibility: hidden？
很多人以为 visibility: hidden 配合 :checked 就够了，结果发现模态框占位、背景还能点透、动画卡顿 —— 因为它只是“看不见”，但还在文档流里。
性能影响：即使不可见，浏览器仍会计算布局、绘制图层，尤其在低端 Android 设备上，多个隐藏模态框一起存在会拖慢渲染。
- 真正该用的是
display: none（配合:checked切换），彻底移出渲染树 - 若需要淡入动画，得用
opacity+transition，但注意：opacity 为 0 时仍可交互，必须同步加pointer-events: none - 别忘了加
transition: opacity 0.2s ease，否则 iOS 上动画可能被强制禁用 - 关闭动画时，
pointer-events: none要延后移除（用transitionend或定时器），否则用户可能在消失瞬间点到下面内容
最易被忽略的一点：checkbox 的 id 和 label[for] 必须唯一且拼写零误差，HTML 不报错，但一错整个链路就静默失效 —— 调试时先查这个，比翻 CSS 快十倍。
