1.visibility: hidden/visible與dispaly：none
有些人簡單的認為display: none;和visibility: hidden;
這兩個屬性的差別在于前者隐藏後不占據文檔空間。
後者隐藏後會占據文檔空間。
其實visibility: hidden并不是你想的這個簡單。
visibility是一個你低估了的屬性，
我們都知道visibility: hidden;是具繼承性的，
如果父級元素設定了visibility: hidden;
那麼子集元素也會看不見。
但是如果子集元素設定了visibility: visible;
則該子元素又會顯示出來
這個和display:none有着本質的差別 <ul>
<li>你看不見我1</li>
<li class="second-li">你看不見我2</li>
<li>你看不見我3</li>
<li>你看不見我4</li>
</ul>
<style type="text/css">
ul{
visibility: hidden;
background: pink;
}
.second-li{
visibility: visible;
}
</style> 我們發現雖然最外層的ul雖然被visibility: hidden
但是其子元素設定了 visibility: visible
那麼該子元素就會被顯示出來 2.display和visibility對計數器的影響
display: none; 對計數器是有影響的；
如果某一個元素隐藏則該元素不參與計數器的計算
visibility: hidden;對計數器是沒有影響的
如果某一個元素隐藏則該元素仍然參與計數器的計算 <ol>
<li>不影響計數器1</li>
<li class="second-li">不影響計數器2</li>
<li>不影響計數器3</li>
<li>不影響計數器4</li>
</ol>
<ol>
<li>影響計數器1</li>
<li class="li-er">影響計數器2</li>
<li>影響計數器3</li>
<li>影響計數器4</li>
</ol>
<style type="text/css">
ol{
background-color: mistyrose;
margin-top: 10px;
}
.second-li{
visibility: hidden;
}
.li-er{
display: none;
}
</style> 
3.display與visibility參與的動畫效果不同
display:none參與的動畫效果是不會産生過渡動畫的,
即使你設定了過渡的時間。
visibility: hidden參與的動畫會産生過渡效果;
因為css3對transition支援的屬性中就visibility；
但是很遺憾的是沒有對display進行支援。 3.1使用display: none對動畫産生的過度效果
下面的代碼因為使用了display: none;
雖然設定了動畫的過度效果
但是卻立刻顯示出來了 <div class="box">
顯示出來顯示出來
<div class="son">
我沒有動畫效果
</div>
</div>
.son{
opacity: 0;
transition: opacity 5s;
display: none;
}
.box:hover .son{
display: block;
opacity: 1;
} 
3.2 使用visibility: hidde對動畫産生的過度效果;
<div class="box">
顯示出來顯示出來
<div class="son">
我沒有動畫效果
</div>
</div>
<style type="text/css">
.son{
opacity: 0;
transition: opacity 5s;
visibility: hidden;
}
.box:hover .son{
visibility: visible;
opacity: 1;
}
</style> 4.是否有回流
display:none是徹底消失，
不在文檔流中占位，
浏覽器也不會解析該元素；
display:none切換時會産生回流。
visibility:hidden是視覺上消失了，
在文檔流中占位，浏覽器會解析該元素；
不會産生回流 遇見問題，這是你成長的機會，如果你能夠解決，這就是收獲。
作者：晚來南風晚相識
如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。