display: none彻底移除元素且不占空间，visibility: hidden仅隐藏但保留布局位置。前者引发重排，后者仅重绘且性能更优，子元素可独立显示。
display: none 和 visibility: hidden 都可以用来隐藏网页元素，但它们的隐藏方式和对页面布局的影响完全不同。
display: none 的作用
使用 display: none 会完全从文档流中移除元素，相当于这个元素不存在。
• 不可点击、不可聚焦，也无法通过 JavaScript 获取焦点
• 子元素也会一同被隐藏，无论其自身 display 值如何
• 对屏幕阅读器等辅助工具来说，该元素通常被视为不存在
visibility: hidden 的作用
使用 visibility: hidden 只是让元素不可见，但它仍然存在于页面中并保留原有空间。
• 元素继续占据布局中的位置，周围元素不会移动• 不可见，但依然可以响应某些 JavaScript 事件（取决于具体设置）
• 子元素可通过设置 visibility: visible 来重新显示
• 对无障碍访问工具可能仍能读取到该内容
关键区别总结
• 空间占用：display: none 不占空间；visibility: hidden 保留空间• 布局影响：display: none 引起重排（reflow）；visibility: hidden 只触发重绘（repaint）
• 继承性：visibility 是可继承的，子元素会默认跟随父级隐藏状态（除非单独设置）
• 性能表现：频繁切换时，visibility: hidden 性能更好，因不引起布局变化 基本上就这些。根据是否需要保留空间和布局稳定性来选择合适的方式。
