css如何讓div隱藏
- 藏色散人原創
- 2021-04-25 09:30:5010615瀏覽
css讓div隱藏的方法：1、使用「display:none」來隱藏div；2、使用「visibility: hidden;」隱藏div；3、使用「opacity: 0」隱藏div。
本文操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。
在我們平常佈局網站的時候，想要把p進行隱藏，但是很多人不知道css控制p顯示隱藏？下面我們來講解一下css如何讓p隱藏。
1、使用display:none來隱藏div
我們可以使用display:none屬性來隱藏所有的訊息，包括文字和圖片，語法為：
dc6dce4a544fdca2df29d5ac0ea9906b这里你是看不到的16b28748ea4df4d9c2150843fecfba68
當我們使用p中的css樣式，我們就可以使用display:none屬性對內容進行隱藏，並且透過瀏覽器也是看不到的，同時被隱藏的內容是不被佔用空間的，隱藏之後的內容搜尋引擎是不讀取的，一般我們都是用使用js統計程式來隱藏顯示的圖示。
2、使用visibility: hidden;隱藏div
visibility 屬性規定元素是否可見。
這個屬性指定是否顯示一個元素產生的元素框。這意味著元素仍佔據其本來的空間，不過可以完全不可見。值 collapse 在表中用於從表佈局中刪除列或行。
屬性值：
visible 預設值。元素是可見的。
hidden 元素是不可見的。
collapse 在表格元素中使用時，此值可刪除一行或一列，但它不會影響表格的佈局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上，則會呈現為 "hidden"。
3、使用opacity: 0隱藏div
#opacity 屬性的意思是設定一個元素的透明度。它不是為改變元素的邊界框（bounding box）而設計的。
這表示將 opacity 設為 0 只能從視覺上隱藏元素。而元素本身依然佔據它自己的位置並對網頁的佈局起作用。這和上面的visibility: hidden 相似。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--opacity: 0</title>
<style>
div{
height: 20px;
}
.demo{
width: 800px;
height: 60px;
margin: 50px auto;
border: 1px solid red;
}
.hide,span{
opacity: 0;
}
</style>
</head>
<body>
<div>
<div sty>元素隐藏1--opacity: 0</div>
<div>元素隐藏2--opacity: 0</div>
<div>元素隐藏3--opacity: 0</div>
</div>
<div>
<div>元素隐藏1--opacity: 0,元素隐藏2--opacity: 0,元素隐藏3--opacity: 0</div>
<div>元素隐藏1--opacity: 0,<span>元素隐藏2--opacity: 0</span>,元素隐藏3--opacity: 0</div>
</div>
</body>
</html>效果圖：
【推薦學習：css影片教學】
以上是css如何讓div隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章！