在我們平時布局網站的時候，想要把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"。
3、使用opacity: 0隱藏div
opacity 屬性的意思是設置一個元素的透明度。它不是為改變元素的邊界框（bounding box）而設計的。
這意味着將 opacity 設為 0 只能從視覺上隱藏元素。而元素本身依然占據它自己的位置並對網頁的布局起作用。這和上面的visibility: hidden 相似。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>元素隱藏--opacity: 0</title> 6 <style> 7 div{ 8 height: 20px; 9 } 10 .demo{ 11 width: 800px; 12 height: 60px; 13 margin: 50px auto; 14 border: 1px solid red; 15 } 16 .hide,span{ 17 opacity: 0; 18 } 19 </style> 20 </head> 21 <body> 22 <div> 23 <div sty>元素隱藏1--opacity: 0</div> 24 <div>元素隱藏2--opacity: 0</div> 25 <div>元素隱藏3--opacity: 0</div> 26 </div> 27 <div> 28 <div>元素隱藏1--opacity: 0,元素隱藏2--opacity: 0,元素隱藏3--opacity: 0</div> 29 30 <div>元素隱藏1--opacity: 0,<span>元素隱藏2--opacity: 0</span>,元素隱藏3--opacity: 0</div> 31 </div> 32 </body> 33 </html>
效果圖：
