分享CSS将页面元素隐藏的10种方法

在Web开发中，隐藏页面元素使其视觉不可见是一个非常常见的需求。为了实现这一目标，我们通常会采用多种方法，最常用的例如CSS的display属性，只要设置为node即可隐藏元素。

本文将通过对当前所有可用的隐藏元素的方法做一个总结，大概有10种方法可以使用，一一做下介绍。

所有方法的总结在文章的最后，可以跳过前文。

display:none

display 属性用于设置页面元素的显示方式，能够控制元素的显示或者隐藏，当它的值被设置为 none 时，就会隐藏对应的元素，使其不可见。
这种方法是最常用的隐藏元素的方法，可以让元素在网页中完全消失，不会占据页面上的任何空间，用户无法看到或进行交互。
但是，这样也会导致元素脱离文档流，可能会影响其他元素的布局。

<div class="elem">
  这是一个要隐藏的元素。
</div>

.elem {
  display: none;
}

visibility:hidden

visibility 属性是专门用于控制元素的显示和隐藏，当它的值设置为 hidden 后，也会将元素隐藏。
但与 display 不同的地方在于，此时元素仍会占据页面上的空间，只是在视觉上不可见，显示为空白区域(所占区域为元素的大小)。
这种方式也是无法进行元素的响应事件监听和交互状态，通常应用于需要隐藏但仍需要占据空间的元素，如占位符、提示信息等。

.elem {
  visibility: hidden;
}

opacity: 0

opacity 属性用于控制元素的透明度，取值范围：0 - 1，0 表示完全透明，1 表示不透明。
当我们将元素的 opacity 属性设置为 0 时，该元素将会变为不可见状态，不过它仍