元素的隱藏/顯示可以說是使用頻率最高的方法之一，比如二級菜單，響應式布局，透明過度等等許許多多的特效都會使用到，以下介紹一下元素隱藏的各屬性以及他們的特性和使用方法：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。它在移動端中經(jīng)常用來設置a鏈接。在隱藏的方法中，取none值這種方法一般是不可取的！因為display：none是直接不顯示，也就是不渲染此元素，如果它所作用的元素排版在頁面較前，先渲染，就容易引起回流(reflow)和重繪(repaint),造成難以預知的后果。
特點： 不占據(jù)空間，不可點擊（對鼠標事件無響應）
株連性：其后代元素一概不渲染
transition無法對其起作用
2.visibility:hidden/visible
比較常用的方法，瀏覽器對其渲染可是不可見，它占據(jù)空間卻不可點擊,我們來測試一下：
<style> .visibility{visibility:hidden;}</style>
可以看到，元素消失，而后面的div卻沒有占據(jù)它原來的位置，說明元素不可見卻仍然占據(jù)空間。另外還有一種特殊情況：
<style>
.visibility{
visibility:hidden;
position: absolute;
}
</style>
設置position:absolute后，元素不占據(jù)空間了??！為什么呢？？其實原因很簡單，設置此屬性后，元素將脫離文檔流，后面的元素就會占據(jù)它原本的空間，同樣效果的還有 position:fiexd 和 float:left/right。
特點：占據(jù)空間，卻不可點擊（對鼠標事件無響應）
有繼承性，無株連性，后代元素可以設置visibility:visible來顯示自己
transition對hidden -> visible無效,對visible -> hidden 有效
3.opacity:0
這個屬性應該是最常用于隱藏的屬性了，取值為0-1.
特點：占據(jù)空間，可點擊（對鼠標事件有響應）
有繼承性，無株連性，后代元素可設置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
這個屬性在做二級菜單時可以發(fā)揮大用處。通過設置元素的 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>
特點：由于是溢出，顧名思義，隱藏的部分本來就不占據(jù)空間。
顯示可點擊（對鼠標事件響應）
無繼承性，無株連性，只對設置的元素起作用。
transition對其有效，可做出炫酷的效果哦
只需要改變元素的height:0px即可起到隱藏的效果
