溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下怎么使用CSS布局屬性控制元素的隱藏與顯示的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
CSS中提供了一些可以使元素顯示與隱藏的屬性，分別是display、visibility、overflow和opacity。
display屬性用于設置一個元素如何顯示。
display：none；隱藏對象
display：block；除了轉換為塊級元素之外，同時還有顯示元素的意思。
display隱藏元素后，不在占有原來的位置
示例如下：
display 屬性用于設置一個元素應如何顯示。
display: none 隱藏對象 display：block 除了轉換為塊級元素之外，同時還有顯示元素的意思。
特點： display 隱藏元素后，不再占有原來的位置。（人沒了，錢也沒了）
后面應用及其廣泛，搭配 JS 可以做很多的網頁特效。
示例：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.peppa {
/* display: none; */
display: block;
width: 200px;
height: 200px;
background-color: pink;
}
.george {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style></head><body>
<p class="peppa">佩奇</p>
<p class="george">喬治</p></body></html>
特點：visibility 隱藏元素后，繼續占有原來的位置。
如果隱藏元素想要原來位置，就用 visibility：hidden
如果隱藏元素不想要原來位置，就用 display：none
visibility屬性用于指定一個元素應可見還是隱藏。
visibility：visible；元素可視
visibility：hidden；元素隱藏
visibility隱藏元素后，繼續占有原來的位置
overflow屬性指定了如果內容溢出一個元素的框框時（超過了其指定高度及寬度），會發生什么。
overflow：visible；不剪切內容也不添加滾動條
overflow：hidden；不顯示超出對象尺寸的內容，超出的部分隱藏掉。
overflow：scroll；不管超出內容否，總是顯示滾動條。
overflow：auto；超出指定顯示滾動條，不超出不顯示滾動條。
一般情況下，不讓溢出的內容顯示，因為已出的部分會影響布局。
如果有定位的盒子，請慎用overflow：hidden因為它會隱藏多余的部分。
總結如下：
| 屬性值 | 描述 |
|---|---|
| visible | 不剪切內容也不添加滾動條 |
| hidden | 不顯示超過對象尺寸的內容，超出的部分隱藏掉 |
| scroll | 不管超出內容否，總是顯示滾動條 |
| auto | 超出自動顯示滾動條，不超出不顯示滾動條 |
一般情況下，我們都不想讓溢出的內容顯示出來，因為溢出的部分會影響布局。
但是如果有定位的盒子， 請慎用overflow:hidden 因為它會隱藏多余的部分。
示例：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.peppa{
/* overflow: visible; */
/* overflow: hidden; */
/* scroll 溢出的部分顯示滾動條，不溢出也顯示滾動條 */
/* overflow: scroll; */
/* auto溢出的時候才顯示滾動條，不溢出不顯示滾動條 */
overflow: auto;
width: 200px;
height: 200px;
border: 3px solid pink;
margin: 100px auto;
}
</style></head><body>
<p class="peppa">
《小豬佩奇》（Peppa Pig）是英國動畫公司Astley Baker Davies與Entertainment One制作的原創歐洲兒童系列電視動畫 [11] [13] ，由內維爾·阿斯特利、馬克·貝克、菲爾·霍爾與喬里斯·范胡爾岑執導 [14] ，于2004年5月31日在英國電視五臺首播 [15] ，2015年6月，《小豬佩奇》引進中國大陸，并在中央電視臺少兒頻道首播 [17]
</p></body></html>
opacity屬性讓其元素整體（包括內容）一起透明。
用法：opacity：屬性值；
屬性值取值：0~1之間的數字， 1表示完全不透明，0表示完全透明。
opacity會讓元素整體透明（包括內容、文字、子元素）
| 屬性 | 區別 | 用途 |
|---|---|---|
| display 顯示 （重點） | 隱藏對象，不保留位置 | 配合后面js做特效，比如下拉菜單，原先沒有，鼠標經過，顯示下拉菜單， 應用極為廣泛 |
| visibility 可見性 （了解） | 隱藏對象，保留位置 | 使用較少 |
| overflow 溢出（重點） | 只是隱藏超出大小的部分 | 1. 可以清除浮動 2. 保證盒子里面的內容不會超出該盒子范圍 |
以上就是“怎么使用CSS布局屬性控制元素的隱藏與顯示”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
