使用 CSS 隐藏元素

在 Web 开发中，有时需要暂时隐藏某个元素，等到需要再次显示它。使用 CSS 可以轻松实现这个功能。

隐藏元素的方法

有几种方法可以隐藏元素，下面分别介绍。

display:none

使用 display:none 可以隐藏元素，被隐藏的元素不会在页面中占据任何空间。

.hide {
  display: none;
}

visibility:hidden

使用 visibility:hidden 也可以隐藏元素，不过被隐藏的元素仍然会在页面中占据空间。

.hide {
  visibility: hidden;
}

opacity:0

使用 opacity:0 可以将元素透明化，被隐藏的元素仍然会在页面中占据空间。

.hide {
  opacity: 0;
}

width:0;height:0

使用 width:0;height:0 可以将元素的宽度和高度都设为零，被隐藏的元素仍然会在页面中占据空间。

.hide {
  width: 0;
  height: 0;
}

显示元素的方法

要显示之前隐藏的元素，只需要将它的 CSS 属性设为默认值即可。

.show {
  display: block;
  visibility: visible;
  opacity: 1;
  width: auto;
  height: auto;
}

总结

使用 CSS 隐藏元素是一项常用的技术，我们介绍了几种隐藏元素的方法，也讲解了如何再次显示已隐藏的元素。在实际开发中，会根据具体场景选择适合的方法来隐藏元素。