必须用 display: none 时：元素需彻底退出文档流、不占空间，如弹窗关闭、响应式隐藏侧边栏、SEO/屏幕阅读器需跳过；visibility: hidden 更适合临时隐藏且需保持布局稳定、焦点或动画场景。
选 display: none 还是 visibility: hidden，关键看你要不要保留布局位置、是否需子元素单独显示、以及是否在意重排开销 —— 二者语义完全不同，混用容易引发布局跳动、焦点丢失或可访问性问题。
什么时候必须用 display: none
当元素需要彻底退出文档流、不占空间、且后续无需快速切回时，display: none 是唯一选择：
- 弹窗关闭后移除占位，避免下方内容上浮造成视觉抖动
- 响应式中整块模块（如侧边栏）在小屏下完全隐藏，不给容器留空隙
- 表单字段动态显隐，且依赖
querySelector查找时需确保 DOM 节点存在但渲染树中不可见（注意：DOM 仍在，只是不渲染） - SEO 或屏幕阅读器需跳过该内容（
display: none默认不被解析，visibility: hidden可能仍被读出）
什么时候更适合 visibility: hidden
当隐藏只是临时的、布局必须稳定、或需要保留焦点/事件冒泡路径时，visibility: hidden 更安全：
- 折叠面板（accordion）切换时，用
visibility: hidden+opacity做渐隐动画 ——display不支持 CSS transition - 父容器设为
visibility: hidden，但某个子按钮需保持可点击（设visibility: visible即可生效） - 表单验证失败时临时隐藏错误提示，但希望用户 tab 键导航时仍能跳过该区域（
visibility: hidden元素仍可被focus()，而display: none不行） - 频繁切换显隐的列表项（如筛选结果），避免反复重排导致卡顿
getComputedStyle 检查状态时的陷阱
用 JavaScript 判断当前隐藏方式不能只看 style.display 或 style.visibility，它们只反映内联样式：
立即学习“前端免费学习笔记（深入）”；
- 要获取真实计算值，必须用
getComputedStyle(el).display和getComputedStyle(el).visibility - 若元素通过 class 设置了
display: none，但内联样式写了visibility: hidden，后者不会覆盖前者 —— 渲染以display: none为准 -
offsetParent === null可间接判断是否被display: none移除（但不绝对，比如父级display: none也会导致）
别忽略可访问性和表单提交行为
两者对辅助技术和表单数据的影响差异很大，容易被忽视：
-
display: none的<input>仍会随表单提交，但屏幕阅读器默认跳过；visibility: hidden的<input>同样提交，但可能被读出 —— 若需屏蔽读屏，必须额外加aria-hidden="true" -
display: none元素无法获得焦点，也无法参与事件捕获/冒泡；visibility: hidden元素虽不可见，但若本身可聚焦（如<button>），仍能接收focus()，且鼠标移入其子元素时可能触发父级:hover - 计数器（如
counter-increment）在display: none下失效，但在visibility: hidden下继续累加
真正难的不是记住区别，而是每次写 style.display = 'none' 前，得想清楚：这个“隐藏”是“删掉它”，还是“让它站那儿但别让人看见”。
