元素的隱藏/顯示可以說是使用頻率最高的方法之一，比如二級菜單，響應式布局，透明過度等等許許多多的特效都會使用到，以下介紹一下元素隱藏的各屬性以及他們的特性和使用方法：display visibility opacity position float overflow
我們先設置一些共有屬性：
<head> <style> div{ width: 100px; height: 100px; background-color: #444; margin: 10px; color: #f00; text-align: center; line-height: 100px; } </style> </head> <body> <div class="display">display</div> <div class="visibility"> <p>visibility</p> </div> <div class="opacity">opacity</div> <div class="overflow">overflow</div> <div class="position">position</div> </body>
效果演示
1.display:none;
display用於設置元素的顯示方式，其常用取值有block inline-block inline。它在移動端中經常用來設置a鏈接。在隱藏的方法中，取none值這種方法一般是不可取的！因為display：none是直接不顯示，也就是不渲染此元素，如果它所作用的元素排版在頁面較前，先渲染，就容易引起回流(reflow)和重繪(repaint),造成難以預知的后果。
特點： 不占據空間，不可點擊（對鼠標事件無響應）
株連性：其后代元素一概不渲染
transition無法對其起作用
2.visibility:hidden/visible
比較常用的方法，瀏覽器對其渲染可是不可見，它占據空間卻不可點擊,我們來測試一下：
<stlyle> .visibility{visibility:hidden;} </style>
可以看到，元素消失，而后面的div卻沒有占據它原來的位置，說明元素不可見卻仍然占據空間。另外還有一種特殊情況：
<style> .visibility{ visibility:hidden; position: absolute; } </style>
設置position:absolute后，元素不占據空間了！！為什么呢？？其實原因很簡單，設置此屬性后，元素將脫離文檔流，后面的元素就會占據它原本的空間，同樣效果的還有 position:fiexd 和 float:left/right。
特點：占據空間，卻不可點擊（對鼠標事件無響應）
有繼承性，無株連性，后代元素可以設置visibility:visible來顯示自己
transition對hidden -> visible無效,對visible -> hidden 有效
3.opacity:0
這個屬性應該是最常用於隱藏的屬性了，取值為0-1.
特點：占據空間，可點擊（對鼠標事件有響應）
有繼承性，無株連性，后代元素可設置opacity:1或者rgba(n,n,n,1)來顯示自己
transition對其有效
使用position或float使其脫離文檔流后，仍然對鼠標事件響應。
4.position ，float。一般也不推薦。
是的，連這兩家伙也來湊熱鬧了，不過它們的確可以起到隱藏的作用，雖然不是真正意義上的隱藏。
將元素設置成position:absolute; 然后通過控制它的位置，將它定位到瀏覽器可視窗口以外的位置，就可以起到隱藏的效果。
如：position:absolute/fiexd
top:0px;
left:-200px;
那么它將從瀏覽器左邊“走出去”，並且它是脫離文檔流的,不會對頁面布局造成影響。
同樣的，浮動元素可也配合margin做到隱藏的效果：
float:left;
margin-left:-200px;
同理，它脫離文檔流，所以不對布局造成影響，可是頁面中若有其它浮動元素就要小心使用。
5.overflow:hidden/visible
這個屬性在做二級菜單時可以發揮大用處。通過設置元素的 width 或 height 來控制元素溢出的樣式，從而起到隱藏/顯示的效果。
方法一：固定overflow屬性值，改變width/height
<head> <style> .overflow{ overflow: hidden; } .overflow > ul > li{ height: 100px; list-style-type: none; } .overflow:hover{ height: 300px; } </style> </head> <body> <div class="overflow"> <ul> <li>導航一</li> <li>導航二</li> <li>導航三</li> </ul> </div> <div class="position">position</div> </body>
方法二：固定 width / height 的值，改變overflow的屬性值。
<head> <style> .overflow{ overflow: hidden; } .overflow > ul > li{ height: 100px; list-style-type: none; } .overflow:hover{ height: 300px; } </style> </head> <body> <div class="overflow"> <ul> <li>導航一</li> <li>導航二</li> <li>導航三</li> </ul> </div> <div class="position">position</div> </body>
特點：由於是溢出，顧名思義，隱藏的部分本來就不占據空間。
顯示可點擊（對鼠標事件響應）
無繼承性，無株連性，只對設置的元素起作用。
transition對其有效，可做出炫酷的效果哦
只需要改變元素的height:0px即可起到隱藏的效果
歡迎補充、指正