display:none與visibility: hidden的區別

「這是我參與更文挑戰的第4天，活動詳情查看： 更文挑戰」

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