CSS: display: none 与 visibility: hidden 的区别

关于隐藏元素，有两个常用的CSS属性可以用于这一目的：display 和 visibility。尽管它们都可以隐藏元素，但它们之间存在一些重要的区别。本文将详细探讨display: none 和 visibility: hidden 的区别。

display: none是一种CSS属性，用于完全从文档流中删除元素，使其不可见且不占据任何空间。这意味着元素被隐藏后，其他元素会立即填补其原先的位置。使用display: none会对页面布局产生影响，因为元素被完全移除。

css 复制代码

.hidden {

  display: none;

}

visibility: hidden也是一种CSS属性，用于使元素不可见，但它仍然占据原来的空间。也就是说，元素虽然不可见，但它仍然会影响页面布局。其他元素不会填补被隐藏元素的位置。

css 复制代码

.hidden {

  visibility: hidden;

}

影响布局：最重要的区别是display: none会从布局中完全移除元素，而visibility: hidden仅使元素不可见但仍占据空间。
动画和过渡：如果你划使用CSS动画或过渡，display: none和visibility: hidden会有不同的效果。使用display: none的元素无法参与动画或过渡，因为它们在文档流中不存在。而visibility: hidden的元素仍然可以参与这些效果。
可访问性：隐藏元素可能会影响页面的可访问性。visibility: hidden元素对屏幕阅读器是可见的，尽管不可见对用户。这在某些情况下可能是有意义的，例如，需要向屏幕阅读器用户提供重要信息，但不希望它们在页面上可见。

使用display: none：需要隐藏元素并彻底从布局中删除它，不占用任何空间。这通常用于需要在用户交互或特定条件下动态显示/隐藏元素的情况。

使用visibility: hidden：需要元素在页面上占据空间，但在视觉上不可见。这对于创建占位符元素或在页面上保留空间以便稍后显示元素很有用。

在选择哪种方法时，考虑具体需求以及元素对页面布局和可访问性的影响。

希望本文对您有所帮助！