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 来“穿透”隐藏。
典型问题： 立即学习“前端免费学习笔记（深入）”； 看 DOM 结构变化最直接：打开浏览器开发者工具，选中元素，观察右侧 真正复杂的不是选哪个属性，而是隐藏之后要不要保持可访问性、要不要参与表单提交、会不会被动画打断重排 —— 这些都得结合语义和交互目标来定，不能只看“看不见”。
– 看似隐藏了，但点击区域还在（虽然不可见，仍可触发 click，除非同时加 pointer-events: none）
– 表格中对 用 visibility: hidden，会导致 高度异常（部分浏览器下 tbody 会塌缩）
visibility: hidden; opacity: 0; → 过渡 opacity → 完成后设 visibility: hidden 防止焦点进入z-index 无关，不影响层叠上下文创建实际调试中怎么快速判断该用哪个
Computed 标签页里 display 和 visibility 的最终值；再切到 Layout 或勾选 Show layout shifts，看隐藏前后是否引发周围元素位置变动。
visibility: hidden 替代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;
}
