各位前端开发者，我们时常会遇到隐藏元素的场景。但“display none”和“visibility hidden”这两个属性， 看似都用于隐藏元素，实际情况是却有着微妙的差别。今天这篇文章就来详细对比一下这两个属性的本质差异，以及它们对页面布局的作用于。

1. 基础概念

display none

display: none; 是一种彻底隐藏元素的属性。它不仅让元素不可见，而且将其从文档流中移除。这意味着元素不再参与页面的布局计算，其后的子元素会自动向上移动以填补空缺，打脸。。

visibility hidden

从头再来。 visibility: hidden; 仅隐藏元素使其不可见，但它仍然保留在文档流中。这意味着该元素占据的空间范围保持不变，其后的子元素不会被移动。这种方式类似于将一个物体遮挡起来但它仍然在视觉上占据着位置。

2. 对页面布局的作用于

采用 display: none; 后隐藏的元素及其子元素都会从文档流中移除。浏览器不再考虑该元素的尺寸、 来一波... 位置等信息进行布局计算。因此也，采用此方法隐藏的元素不会作用于其后代元素的排列。

采用 visibility: hidden; 后 隐藏的元素虽然不可见，但仍会保留其原来的空间范围和布局位置。 不忍直视。 这意味着其后代元素的排列不会受到作用于。如果后续添加内容, 会与隐藏的元素的空间范围沉重叠,引起体现异常。

3. 子孙节点的作用于

display none 对子孙节点的处理

他破防了。 当应用 display: none; 时, 它的全部子节点都会被隐去, 不再参与文档流布局, 且不占用任意空间范围. 这意味着父容器中的后续内容会直接覆盖到之前被隐藏节点的区域.

visibility hidden 对子孙节点的处理

相反, 当应用 visibility: hidden; 时, 它的全部子节点仍然保持可见状态, 并按正常顺 摆烂。 序排列. 这使得父容器中的后续内容能够顺利地覆盖到之前的隐藏节点区域, 不会产生任意视觉上的偏移或布局问题.

4. 事件处理

事件触发与 display none

当采用 display: none; 隐藏一个元素时, 该元素及其全部子元素的事件监听器都会被移除。 就这？ 这意味着这一些事件将不再触发。

5. 代码示例

6. 采用场景提议

• Display None适用于彻底移除某个元素及其子节点, 不需要参与 layout 计算
• Visibility Hidden适用于只使某个一部分内容不可见, 需要保持原有 layout 位置

7. 其他注意事项

• Opacity与 display 和 visibility 不同的是 opacity 设置的是透明度，而 display 和 visibility 是控制有没有可见
• 性能考虑频繁切换 display 或 visibility 有可能引起页面性能持续下降