CSS - 可见性：让元素显示和隐藏

你好，有抱负的网页开发者们！今天，我们将深入探索CSS可见性的迷人世界。作为你友好的人工智能计算机老师，我非常兴奋能引导你们进行这次旅程。在本教程结束时，你将能够像真正的CSS魔术师一样，让元素消失和重新出现！

什么是CSS可见性？

在我们开始挥动CSS魔杖之前，让我们先了解一下可见性是什么。最简单的说法是，CSS可见性控制元素是否在网页上可见或隐藏。这就好像是在和你的HTML元素玩捉迷藏！

可能的值

让我们来看看我们可以使用可见性属性的哪些不同值：

值	描述
visible	元素是可见的（这是默认值）
hidden	元素被隐藏，但仍然占据空间
collapse	主要用于表格元素，我们将会介绍！
inherit	从其父元素继承可见性

应用范围

可见性属性可以应用于所有HTML元素。是的，你没听错 - 所有元素！从div到段落，从图像到表格，无论你叫什么，可见性都会发挥它的魔力。

DOM语法

现在，让我们看看如何在CSS中使用可见性：

element {
visibility: value;
}

简单吧？将'element'替换为你想要定位的HTML元素，将'value'替换为我们之前讨论过的可见性值。

CSS可见性 - visible值

让我们从默认值'veisible'开始。这是一个例子：

<div class="visible-box">你能看到我吗？</div>

<style>
.visible-box {
width: 200px;
height: 100px;
background-color: lightblue;
visibility: visible;
}
</style>

在这个例子中，我们创建了一个浅蓝色的盒子，里面写着“你能看到我吗？”。可见性被设置为'veisible'，这意味着...你猜对了，盒子是可见的！这是默认行为，即使我们没有指定可见性，结果也会是一样的。

CSS可见性 - hidden值

现在，让我们让东西消失！这是如何使用'hidden'值的：

<div class="hidden-box">现在你能看到我...</div>
<div class="visible-box">现在你看不到我了！</div>

<style>
.hidden-box {
width: 200px;
height: 100px;
background-color: lightpink;
visibility: hidden;
}
.visible-box {
width: 200px;
height: 100px;
background-color: lightgreen;
}
</style>

在这个例子中，我们有两个盒子。第一个被设置为'hidden'，所以它不会在页面上可见。但是 - 这很重要 - 它仍然占据空间！第二个盒子会在第一个盒子的不可见空间之后出现。

这与display: none不同，后者会完全从布局中移除元素。把'hidden'想象成隐形斗篷 - 元素仍然在那里，只是你看不见！

CSS可见性 - collapse值

'collapse'值有点特殊。它主要用于表格元素。让我们看看它是如何工作的：

<table>
<tr>
<td>我可见！</td>
<td class="collapsed">我被折叠了！</td>
<td>我也可见！</td>
</tr>
</table>

<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
}
.collapsed {
visibility: collapse;
}
</style>

在这个例子中，我们表格行的中间单元格被设置为'collapse'。这意味着它将被隐藏，它本应占据的空间将被周围的单元格占据。就像这个单元格从未存在过！

CSS可见性 - 在非表格元素上使用Collapse

你可能在想，“如果我在非表格元素上使用'collapse'会发生什么？”好问题！这种行为在浏览器之间可能会有所不同，但通常，它会表现得和'hidden'一样。让我们试试：

<div class="normal">我是一个正常的div</div>
<div class="collapsed">我是一个折叠的div</div>
<div class="normal">我是另一个正常的div</div>

<style>
.normal {
background-color: lightyellow;
margin: 5px;
padding: 5px;
}
.collapsed {
background-color: lightcoral;
margin: 5px;
padding: 5px;
visibility: collapse;
}
</style>

在大多数浏览器中，'collapsed'的div将表现得像visibility: hidden。它不可见，但仍然占据空间。

CSS可见性 - 过渡效果

这里的事情变得非常有趣！我们可以使用CSS过渡来创建平滑的可见性效果。看看这个：

<div class="magic-box">把鼠标放在我上面！</div>

<style>
.magic-box {
width: 200px;
height: 100px;
background-color: lavender;
visibility: visible;
opacity: 1;
transition: opacity 0.5s, visibility 0.5s;
}
.magic-box:hover {
visibility: hidden;
opacity: 0;
}
</style>

在这个例子中，当鼠标悬停在盒子上时，它会平滑地淡出并变得不可见。当鼠标移开时，它会淡回来。我们结合了可见性和不透明度来创建这个效果。酷吧？

就这样，伙计们！你们刚刚学习了CSS可见性的里里外外。记住，能力越大，责任越大。明智地使用你的新可见性技能，你的网页会感激你的！

在我们结束之前，这里有一个笑话给你：为什么CSS元素去接受治疗？因为它有太多的隐藏问题！?

快乐编码，愿你的元素在你想要它们可见时总是可见！

Credits: Image by storyset