css div如何隱藏？
阿新 • • 發佈：2020-09-15
在我們平時佈局網站的時候，想要把div進行隱藏，但是很多人不知道css控制div顯示隱藏？下面我們來講解一下css如何讓div隱藏。
1、使用display:none來隱藏div
我們可以使用display:none屬性來隱藏所有的資訊，包括文字和圖片，語法為：
<div>這裡你是看不到的</div>當我們使用div中的css樣式，我們就可以使用display:none屬性對內容進行隱藏，並且通過瀏覽器也是看不到的，同時被隱藏的內容是不被佔用空間的，隱藏之後的內容搜尋引擎是不讀取的，一般我們都是用使用js統計程式碼去隱藏顯示的圖示。
2、使用visibility: hidden;隱藏div
visibility 屬性規定元素是否可見。
這個屬性指定是否顯示一個元素生成的元素框。這意味著元素仍佔據其本來的空間，不過可以完全不可見。值 collapse 在表中用於從表佈局中刪除列或行。
屬性值：
-
visible 預設值。元素是可見的。
-
hidden 元素是不可見的。
-
collapse 當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的佈局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 "hidden"。
廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com
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> 效果圖：