Visibility Hidden and Display None in CSS

visibility: hidden 和 display: none

hidden 是 CSS 中用于隐藏网页元素的属性值。它们在几个重要方面存在显著差异。让我们更详细地探讨 CSS 中 display: none 和 visibility: hidden 之间的区别。

应用了 visibility: hidden 的元素在渲染时实际上是不可见的，但它仍然存在于文档流中。因此，隐藏的元素会继续占用页面空间，并像可见时一样影响布局。即使元素看起来是透明的，它仍然可以与页面上的其他元素进行交互。例如，您可以使用 JavaScript 点击它，触发事件，或者更改其属性。

然而，display: none 采取了更极端的策略。当元素应用了 display: none 时，它不仅在视觉上被隐藏，而且被完全从文档流中移除。因此，隐藏的元素不会出现在页面的任何位置，也不会影响其他元素的排列。它在生成的文档中几乎是缺席的。因此，与它的交互，例如点击或选择，都是不可能的。当您希望将一个元素从网页的可见区域中移除时，无论是永久还是暂时，通常会采用这种方法。

visibility: hidden

• 应用了 visibility: hidden 的元素即使从视图中隐藏，仍然保留在布局中。换句话说，该元素仍然是文档流的一部分，并且像可见时一样影响布局。
• 尽管不可见，隐藏的元素仍然与其他页面元素进行通信。例如，您可以使用 JavaScript 与其交互，并且它可以修改其他部分如何布局。

优点

• 布局空间： 隐藏的元素仍然占用布局空间，这在某些需要保留布局结构的特定设计场景中非常有用。
• 可交互： 即使元素不可见，它仍然是可交互的。如果您希望暂时隐藏一个元素，同时允许脚本用户交互，这可能很有帮助。

缺点

• 影响布局： 由于元素仍然占用布局空间，它可能会对相邻元素的位置产生不利影响。
• 有限的视觉控制： 此选项会遮挡元素的视觉表示；它不会将元素排除在文档流之外。因此，在元素应完全消失的情况下，它可能不适用。

display: none

• 应用了 display: none 的元素不仅在视觉上隐藏，而且被从文档流中移除。这意味着元素的显示和它在页面上的物理空间都不存在。
• 应用了 display: none 的组件是不可交互的，并且不会影响其他组件的排列。可以说，它们从页面上“消失”了。

优点

• 完全移除： 组件被完全从文档流中移除，以防止它影响布局或干扰其他组件。当您希望干净地移除一个元素时，这是有利的。
• 性能： 由于浏览器不需要渲染隐藏的元素，使用 display: none 隐藏元素可能比使用 visibility: hidden 隐藏元素性能更高。

缺点

• 无布局影响： 尽管在某些情况下很有用，但如果保持布局的有序性至关重要，那么该元素缺乏布局影响可能是一个缺点。
• 不可交互： 该元素停止交互，使得用户无法通过点击或选择与之进行交互。如果您需要用户与隐藏的部分进行交互，可能有更好的选择。

结论

总之，display: none 和 visibility: hidden 之间的选择取决于您设计和功能的具体需求。如果您需要一个看不见的元素，但它仍然可以交互并且会影响布局，则使用 visibility: hidden。如果您想完全从页面中移除一个元素，包括它可能对交互和布局产生的影响，那么 display: none 是最佳选择。为了做出明智的决定，请根据您的项目权衡利弊。