display: none 和 visibility: hidden 都可以隐藏元素，但在如何隐藏以及对页面布局的影响方面有所不同：
display: none
- 彻底隐藏： 元素完全从文档流中移除，就像它从未存在过一样。占据的空间会被其他元素填充。
- 不占据空间： 隐藏后的元素不占据任何空间，不会影响页面布局。
- 无法响应事件： 隐藏后的元素无法响应任何用户交互事件，例如点击、悬停等。
- 子元素也会被隐藏： 除非子元素单独设置
display属性为其他值，否则子元素也会被隐藏。 - 性能影响较小： 因为元素完全从渲染树中移除，所以对浏览器性能的影响相对较小，尤其是在隐藏大量元素时。
visibility: hidden
- 视觉上隐藏： 元素只是视觉上不可见，但仍然存在于文档流中，占据着原来的空间。
- 占据空间： 隐藏后的元素仍然占据着原来的空间，会影响页面布局。
- 无法响应事件： 与
display: none相同，隐藏后的元素无法响应用户交互事件。 - 子元素也会被隐藏： 除非子元素单独设置
visibility属性为visible，否则子元素也会被隐藏。 - 性能影响较大： 浏览器仍然需要渲染隐藏的元素，只是不显示出来，因此对性能的影响比
display: none大，尤其是在隐藏大量元素时。
总结:
| 特性 | display: none | visibility: hidden |
|---|---|---|
| 占据空间 | 否 | 是 |
| 影响布局 | 否 | 是 |
| 响应事件 | 否 | 否 |
| 子元素隐藏 | 是 | 是 |
| 性能影响 | 较小 | 较大 |
使用场景:
- display: none: 适用于希望元素完全从页面中移除，并且不影响布局的情况，例如根据条件动态显示或隐藏某些内容。
- visibility: hidden: 适用于希望元素暂时隐藏，但保留其在页面布局中的位置的情况，例如实现类似 loading 效果，或者在切换元素状态时避免页面重排。
希望以上解释能够帮助你理解 display: none 和 visibility: hidden 的区别。
