本章的主要內容是利用CSS控制元素的“顯隱”，說道顯隱，之前其實已經提供了一些非常規的CSS方法，如clip，z-index，opacity等，本章我們來深入探究一下display:none和visibility: hidden折兩個屬性。

1.display與元素的顯隱

  對於一個display計算值是none的元素而言，該元素及其後代元素全部都被隱藏（請記住這個概念，等下對比下visibility的說法）。你可以認為當前元素從dom文件流中“消失了”，當然不是真正的消失，這個節點依舊存在於文件流中，因此vue中的v-show對應的是CSS的display值，而v-if則是徹底刪除節點，跑的有點偏，迴歸正題。當一個元素被設定為display:none的時候，該元素無法被點選，同時佔據的空間消失。一般情況下，是這樣，但這裡需要排除一種特殊情況，如下：

<form>
    <input id="hide" type="submit" style="display:none"/>
    <label for="hide">點選觸發提交</label>
</form>

  在本例中，表單元素確實無法被點選，但由於label綁定了id為“hide”的元素，因此點選label標籤依舊可以觸發click事件，所以說無法被點選的說法是沒問題的，但該元素的點選事件依舊被保留，並且可以通過其他手段觸發。

  display:none顯隱控制並不會影響CSS3 animation動畫的實現，但會影響transition的過渡動畫效果，因此如果要用到transition的話，建議使用visibility。

  除了動畫效果外，display：none還會影響CSS的計數佇列。舉個例子，10個列表從1開始計數，當第二個列表的display置為none，就會導致計數器忽略當前元素，原來的第三個列表則計數為2。

2.visibility與元素的顯隱

  說起visibility屬性，很多人簡單的認為display:none和visibility:hidden兩個隱藏的區別就在於display:none隱藏後的元素不佔據任何空間，而visibility:hidden隱藏的元素空間依舊保留。這也是我們通常意義上區分兩者並能產生實際作用的關鍵點。除了保留隱藏空間，visibility還有許多有意思的屬性，甚至跟display完全不一樣的點，下面我們來一起捋一捋。

  首先visibility和display最大的區別點在於，父元素設定了visibility：hidden後，子元素也隱藏的深層原因在於子元素會繼承父元素的visibility:hidden，因此，當我們需要隱藏父元素而又要顯示部分子元素的時候，只需要把子元素繼承的visibility改成預設的visible屬性即可，這一點在被設定了display:none的元素上，根本不可能實現。我們來通過一個例子，驗證一下上面的理論

<div class="father">
	<div class="list">list1</div>
	<div class="list">list2</div>
	<div class="list" style="visibility: visible;">list3</div>
	<div class="list">list4</div>
</div>
<p>驗證visibility本身佔據空間</p>
<style>
	.father{
		width: 200px;
		height: 200px;
		border:1px solid;
		visibility: hidden;
	}
</style>

  visibility的元素的子元素只是單純的繼承了父元素的visibility，因此在CSS計數方面不會有任何影響，這點和display:none也有所不同。同時transition過渡是支援visibility屬性的，因此在使用過渡動畫的時候，想讓元素實現淡入淡出效果來控制顯隱的可以使用visibility:hidden。

  本章內容跳過了原著第九章關於color和background的部分，下一章為包含了原著一些個人認為雜七雜八的屬性，包含跳過的部分，有興趣的可以點個關注