display:none与visibility的区别

1. 是否占据空间

• display: none：元素完全从文档流中移除，不占据任何布局空间。后续元素会“填补”它的位置。
• visibility:hidden：元素仍占据布局空间，但内容不可见（类似透明占位符）。

2.渲染与性能

• display: none：元素及其子元素不会渲染到渲染树，减少内存占用，适合隐藏复杂组件。触发回流（reflow）（布局重新计算）。
• visibility: hidden：元素仍存在于渲染树中，仅视觉隐藏。触发重绘（repaint），不触发回流，性能开销较小。

3. 子元素继承性

• display: none：子元素无法覆盖父属性，全部被隐藏且不占空间。
• visibility: hidden：子元素默认继承隐藏，但可通过设置 visibility: visible 单独显示（父仍占空间，子可见部分可交互）。

4. 交互与事件

• display: none：元素无法响应任何事件（点击、悬停等）。
• visibility: hidden：元素默认不响应事件，但通过 CSS 的 pointer-events: auto
  可强制触发事件（需手动启用）。