CSS - 可見性：讓元素出現和消失

你好，有抱負的網頁開發者們！今天，我們將要進入CSS可見性的迷人世界。作為你們親切的鄰居電腦老師，我很興奮能夠引導你們進行這次旅行。在這個教學的結束時，你將能夠像真正的CSS魔法師一樣讓元素消失和重新出現！

什麼是CSS可見性？

在我們開始揮動我們的CSS魔杖之前，讓我們了解一下可見性是什麼。在最簡單的話語中，CSS可見性控制著元素是否在網頁上可見或隱藏。這就像與你的HTML元素玩捉迷藏遊戲！

可能的值

讓我們看一下我們可以使用visibility屬性的不同值：

值	描述
visible	元素是可見的（這是默認值）
hidden	元素被隱藏，但仍然佔用空間
collapse	主要用於表格元素，我們會介紹這個！
inherit	從其父元素繼承可見性

適用範圍

可見性屬性可以應用於所有HTML元素。是的，你聽得沒錯 - 所有元素！從div到段落，從圖像到表格，無論你說什麼，可見性都會發揮它的魔法。

DOM語法

現在，讓我們看看我們如何在CSS中使用可見性：

element {
visibility: value;
}

簡單吧？將 'element' 替換為你想定位的HTML元素，將 'value' 替換為我們之前討論過的可見性值。

CSS可見性 - visible值

我們從默認值 'visible' 開始。以下是一個例子：

<div class="visible-box">你能看見我嗎？</div>

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

在這個例子中，我們創建了一個淺藍色的盒子，文字為 "你能看見我嗎？"。可見性被設為 'visible'，這意味著...你猜對了，盒子是可見的！這是默認行為，所以即使我們沒有指定可見性，結果也會一樣。

CSS可見性 - hidden值

現在，讓我們讓事物消失！以下是如何使用 'hidden' 值：

<div class="hidden-box">現在你看不見我了...</div>
<div class="visible-box">現在你看不見我了！</div>

<style>
.hidden-box {
width: 200px;
height: 100px;
background-color: 浅粉色;
visibility: hidden;
}
.visible-box {
width: 200px;
height: 100px;
background-color: 浅綠色;
}
</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' 會怎麼樣？" 好問題！行為可能在不同的瀏覽器間有所不同，但通常它會像 'hidden' 一樣行為。讓我們試一試：

<div class="normal">我是一個正常的div</div>
<div class="collapsed">我是一個塌陷的div</div>
<div class="normal">我又是另一個正常的div</div>

<style>
.normal {
background-color: 浅黃色;
margin: 5px;
padding: 5px;
}
.collapsed {
background-color: 浅珊瑚色;
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: 淡紫色;
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