常见的CSS属性隐藏与显示元素

 1.display:none;隐藏元素;display:block;显示元素

 这是最常见的隐藏元素的方法。使用 display: none; 可以完全隐藏元素，使其不在页面中显示。 

<!-- 画一个类名为box的盒子 -->
<div class="box">
  <span>这个元素默认被隐藏,鼠标悬停时显示</span>
</div>

.box {
  width: 200px;
  height: 200px;
}
.box span {
    /* 隐藏盒子中的元素 */
    display: none;
}
.box:hover span {
  /* 鼠标悬停时显示元素 */
  display: block;
}

 

2.visibility: hidden;隐藏元素;visibility: visible;显示元素

 使用 visibility: hidden; 可以将元素隐藏在页面中，但是它的布局仍然存在。这意味着元素占用的空间仍然存在，只是看不到了。

<!-- 画一个类名为box的盒子 -->
<div class="box">
  <span>这个元素默认被隐藏,鼠标悬停时显示</span>
</div>

.box {
  width: 200px;
  height: 200px;
}

.box span {
  /* 隐藏盒子中的元素 */
  visibility: hidden;
}

.box:hover span {
  /* 鼠标悬停时显示元素 */
  visibility: visible;
}

3.opacity: 0;隐藏元素;opacity: 1;显示元素

使用opacity:0; 可以将元素完全隐藏，但元素的占用空间仍然存在。

<!-- 画一个类名为box的盒子 -->
<div class="box">
  <span>这个元素默认被隐藏,鼠标悬停时显示</span>
</div>

.box {
  width: 200px;
  height: 200px;
}

.box span {
  /* 隐藏盒子中的元素 */
  opacity: 0;
}

.box:hover span {
  /* 鼠标悬停时显示元素 */
  opacity: 1;
}

以上是几种常见的隐藏元素的方法。我们可以根据具体的需求选择合适的方法。