在網頁設計中，隱藏和顯示元素是非常常見的需求。為了實現元素的隱藏和顯示，我們通常會使用 CSS 的 display 屬性。本文將介紹 CSS 中常用的隱藏和顯示方法。
一、CSS 中 display 屬性
display 屬性是 CSS 中最常用的屬性之一，它可以控制元素的顯示或隱藏，同時也可以改變元素的表現形式。 display 屬性有許多取值，這裡我們只介紹其中幾個常用的值。
display:none 是最常用的隱藏元素的方法，它將元素完全從文件流中刪除，不佔據任何空間。即使在瀏覽器中查看元素的 HTML 程式碼，也看不到被隱藏的元素。使用 display:none 的優點是，可以在不改變佈局的情況下隱藏元素，且元素不佔空間。
例如，我們可以使用以下CSS 程式碼來隱藏一個元素：
div {
display: none;
}display:block 是最常用來顯示元素的方法。 block 元素會在新的一行中開始，並且會佔據整個父元素的寬度。它可以設定寬高並預設可以容納內聯元素和文字節點。
例如，以下CSS 程式碼將div 元素設定為block 元素：
div {
display: block;
}display:inline 是讓元素內嵌顯示，以相鄰元素的形式出現。它不會在文字前後另起一行，而是與其他元素共用一行。它可以設定元素的寬度和高度，但是不會自動為其換行。
例如，我們可以使用以下CSS 程式碼將span 元素設定為inline 元素：
span {
display: inline;
}display:inline- block 是讓元素既具有inline 的部分特性（元素不會另起一行），又具有block 的一些特性（可以設定寬高），常用來實現一些佈局效果，例如實現圖文混排的效果。
例如，我們可以使用以下CSS 程式碼將div 元素設定為inline-block 元素：
div {
display: inline-block;
}二、CSS 中visibility 屬性
除了display 屬性之外，還有一個常用的屬性可以實現元素的顯示和隱藏，那就是visibility 屬性。 visibility 屬性用於控制元素的可見性，可設定為 visible（預設值，元素可見）和 hidden（元素隱藏）兩種取值。
visibility: visible 是預設值，也就是讓元素可見的取值。這和 display:block 或 display:inline 的情況很像。但是，visibility: visible 的元素在文件中的位置保持不變，不像 display:block 或 display:inline 的元素那樣會受到 CSS 佈局的影響。即使元素被隱藏了，仍然可以使用 JavaScript 或其他技術來取得該元素的位置和大小。
例如，以下CSS 程式碼將div 元素設定為可見狀態：
div {
visibility: visible;
}visibility: hidden 是將元素隱藏的取值。這和 display:none 的效果很像，但是它不會從文件流中移除元素，而是保留元素的佔位空間。因此，如果元素被隱藏，其他元素會佔用該元素的位置，而該元素觸發的事件和動畫仍然有效。
例如，以下CSS 程式碼將div 元素設定為不可見狀態：
div {
visibility: hidden;
}三、CSS 中opacity 屬性
除了使用display 和visibility 屬性進行元素的隱藏和顯示之外，還可以使用opacity 屬性來調整元素的透明度。
opacity: 1 是元素的預設取值，它表示元素完全不透明，即不會透過該元素看到任何後面的內容。
例如，以下CSS 程式碼設定了一個不透明的div 元素：
div {
opacity: 1;
}opacity: 0 表示元素完全透明，即背景完全透過該元素顯示出來。在實際中，opacity: 0 通常用於隱藏元素，並且可以保留元素的佔位空間。
例如，以下CSS 程式碼設定了一個完全透明的div 元素：
div {
opacity: 0;
}div {
opacity: 0.5;
}以上是css隱藏與顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！
