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是視覺上消失了，
在文件流中佔位，瀏覽器會解析該元素；
不會產生迴流

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注博主，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！