display: none 彻底移除元素的文档流位置，不占空间、不响应事件、子元素消失且不可被屏幕阅读器访问；visibility: hidden 保留占位但视觉隐藏，支持过渡动画且子元素可穿透显示。
display: none 会彻底移除元素的文档流位置
元素设置 display: none 后，浏览器渲染时完全跳过它：不占空间、不响应事件、子元素也一并消失，且无法被屏幕阅读器访问（除非额外加 aria-hidden="false" 并手动管理）。
常见误用场景：
– 用在需要保留布局但临时隐藏的按钮上，导致旁边元素突然“挤过来”
– 和 transition 搭配时无效，因为 display 不是可过渡的 css 属性
- 适合真正“不需要存在”的情况，比如未登录时不显示后台入口
- javaScript 中通过修改
element.style.display = "none"切换，注意重置时最好指定具体值（如"block"），而非""（空字符串可能继承默认或计算值） - 服务端渲染中若初始设为
display: none，该元素不会参与 SSR 的布局计算，可能影响首屏样式稳定性
visibility: hidden 保留元素占位但不可见
visibility: hidden 只让元素视觉隐藏，它仍在文档流中占据原有空间，能触发 transition（配合 visibility + opacity 可实现淡出），子元素默认继承该状态 —— 但可通过子元素显式设 visibility: visible 来“穿透”隐藏。
典型问题：
– 看似隐藏了，但点击区域还在（虽然不可见，仍可触发 click，除非同时加 pointer-events: none）
– 表格中对
visibility: hidden，会导致
高度异常（部分浏览器下 tbody 会塌缩）
立即学习“前端免费学习笔记（深入）”；
- 适合需要维持布局稳定的切换，比如菜单展开前的预渲染容器
- 动画建议组合使用：
visibility: hidden; opacity: 0; → 过渡 opacity → 完成后设 visibility: hidden 防止焦点进入
- 与
z-index 无关，不影响层叠上下文创建
实际调试中怎么快速判断该用哪个
看 dom 结构变化最直接：打开浏览器开发者工具，选中元素，观察右侧 Computed 标签页里 display 和 visibility 的最终值；再切到 Layout 或勾选 Show layout shifts，看隐藏前后是否引发周围元素位置变动。
- 如果隐藏后页面其他内容“跳动”，大概率该用
visibility: hidden 替代
- 如果需要 seo 或辅助技术忽略该区域，优先选
display: none（但注意：搜索引擎对 visibility:hidden 的处理已趋近于 display:none，非绝对）
- 表单控件（如
display: none（会被表单忽略），改用 visibility: hidden + position: absolute + left: -9999px 等无障碍友好的隐藏方式
.hidden-visually { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
真正复杂的不是选哪个属性，而是隐藏之后要不要保持可访问性、要不要参与表单提交、会不会被动画打断重排 —— 这些都得结合语义和交互目标来定，不能只看“看不见”。
