说说display:none和visibility:hidden的区别

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 的区别。