CSS如何隐藏元素又不失其占位：display:none与visibility:hidden全面解析

2023-07-16 16:45:04

揭秘 CSS 隐藏元素神器：display:none vs. visibility:hidden

在网页设计中，隐藏元素是一项常见需求。无论是隐藏冗余元素还是根据特定条件切换元素可见性，我们都需要借助 CSS 的强大功能。CSS 提供了两种隐藏元素的方法：display:none 和 visibility:hidden 。

理解这两种属性之间的差异对于网页设计师做出明智选择至关重要。我们将从以下四个关键方面进行深入比较：

1. 表现差异

display:none 将元素从文档流中彻底删除，使其不占用任何空间。相邻元素会自动填补留下的空白区域。而 visibility:hidden 仅将元素隐藏，但其原本的位置仍然保留。

display:none 隐藏元素后，该元素不再占用任何空间，就像它从未存在过一样。相邻元素会自动适应，填补其留下的空隙。相反，visibility:hidden 隐藏元素后，元素本身仍然占据着其原始位置，只是它变得不可见。

display:none 隐藏元素后，元素及其所有内容都会被隐藏，包括子元素、文本内容和边框。而 visibility:hidden 只隐藏元素本身，其子元素、文本内容和边框等仍会可见。

display:none 隐藏元素后，该元素将完全失去交互性，即用户无法与之交互。而 visibility:hidden 隐藏元素后，元素本身不可见，但它仍然保留着交互性，即用户仍然可以与之交互。

了解了 display:none 和 visibility:hidden 的差异后，如何在具体项目中做出最佳选择呢？

当需要完全隐藏元素及其内容时，使用 display:none。 例如，隐藏一个冗余元素或在特定条件下切换元素的显示状态。
当需要隐藏元素本身，但仍需要保留其占位空间或交互性时，使用 visibility:hidden。 例如，隐藏元素的文本内容或在特定条件下切换元素的可见状态。

当然，在做选择时，还需要考虑实际的业务需求和设计效果。有时，您可能需要结合使用 display:none 和 visibility:hidden 来实现更复杂的隐藏效果。

掌握了 display:none 和 visibility:hidden 的异同和选择原则后，您可以灵活运用它们来打造更佳的设计。以下是一些实战场景：

display:none ：

.hidden {
  display: none;
}

visibility:hidden ：

.hidden {
  visibility: hidden;
}

两种方法哪个更快？

display:none 通常比 visibility:hidden 更快，因为浏览器可以完全删除隐藏元素及其子元素。
我可以在移动设备上使用这些方法吗？

是的，display:none 和 visibility:hidden 都可以在移动设备上使用。
我可以将这两种方法用于相同元素吗？

可以，但一般情况下，建议一次只使用一种方法。
是否存在其他隐藏元素的方法？

除了 display:none 和 visibility:hidden 之外，您还可以使用 opacity: 0 来实现透明效果。
如何选择最佳方法？

最佳方法取决于您的特定需求。考虑以下因素：是否需要隐藏整个元素及其内容？是否需要保留元素的占位空间？是否需要保持元素的交互性？