資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學CSS `display: none;` 和 `visibility: hidden;` 的區別
有時候，你可能希望在應用程式中視覺上隱藏元素（即從DOM中刪除它們，但保留在螢幕上）。實現此目標有幾種方法。使用 `visibility` 屬性和 `hidden` 值 **(visibility:hidden;)** 或使用 `display` 屬性和 `none` 值 **(display:none;)** 是兩種常見的方法。
兩種方法都能隱藏元素，但它們對元素行為的影響不同。在這篇文章中，我們將學習 `display:none;` 和 `visibility:hidden;` 之間的區別。
CSS `visibility:hidden`
此 CSS 屬性將使元素佔據螢幕空間，即使它從檢視中隱藏。這意味著在具有此屬性的元素之前和之後的內容將被渲染，但隱藏的元素仍然會佔用完全相同的空間。即使它沒有顯示在螢幕上並佔用空間，HTML 元素仍然存在於 DOM 中。
語法
以下是 CSS `visibility` 屬性的語法：
visibility: visible| hidden | collapse | initial | inherit;
示例
讓我們來看下面的例子，我們將使用 CSS `visibility:hidden` 屬性。
<!DOCTYPE html>
<html>
<head>
<style>
.tp {
display: flex;
gap: 20px;
}
.x {
height: 100px;
width: 150px;
font-size: 30px;
text-align: center;
font-family: verdana;
color: #DE3163;
}
.x1 {
background-color: #E8DAEF;
}
.x2 {
background-color: #DFFF00;
visibility: hidden;
}
.x3 {
background-color: #CCCCFF;
}
</style>
</head>
<body style="background-color:#EAFAF1">
<div class="tp">
<div class="x1 x">A</div>
<div class="x2 x">B</div>
<div class="x3 x">C</div>
</div>
</body>
</html>
執行以上程式碼後，將生成一個輸出，其中包含一個應用了 CSS `visibility` 屬性的 div 盒子，顯示在網頁上。
CSS `display:none`
但是，`display: none` 透過從螢幕上隱藏元素來完成類似的任務。在這種情況下，它不會留下任何空間，並且這種行為給人一種具有此屬性的元素不存在的印象。儘管此屬性對其沒有影響，但元素仍然存在於 DOM 中。元素只是隱藏在 DOM 中。此 CSS 屬性不能用於從 DOM 中刪除元素。
語法
以下是 CSS `display` 屬性的語法：
display: none | inline | block | inline-block;
示例
在下面的示例中，我們將使用 CSS `display:none` 屬性。
<!DOCTYPE html>
<html>
<head>
<style>
.tp {
padding: 50px;
width: max-content;
display: flex;
border: 1px solid #DE3163;
}
.x {
height: 50px;
width: 130px;
}
.x1 {
background-color: #DFFF00;
margin-right: 30px;
}
.x2 {
background-color: #229954;
margin-right: 30px;
display: none;
}
.x3 {
background-color: #212F3D;
}
</style>
</head>
<body style="background-color:#F4ECF7">
<div class="tp">
<div class="x1 x"></div>
<div class="x2 x"></div>
<div class="x3 x"></div>
</div>
</body>
</html>
執行以上程式碼後，將彈出輸出視窗，顯示一個應用了 `display` 屬性的 div 盒子，顯示在網頁上。
.
816 次瀏覽
