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
可强制触发事件（需手动启用）。
