分析比較 opacity: 0、visibility: hidden、display: none 優劣和適用場景

總結：　

　　結構： display:none: 會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間, 不能點擊， visibility: hidden:不會讓元素從渲染樹消失，渲染元素繼續占據空間，只是內容不可見，不能點擊 opacity: 0: 不會讓元素從渲染樹消失，渲染元素繼續占據空間，只是內容不可見，可以點擊

　　繼承： display: none和opacity: 0：是非繼承屬性，子孫節點消失由於元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示。 visibility: hidden：是繼承屬性，子孫節點消失由於繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式。

　　性能： displaynone : 修改元素會造成文檔回流,讀屏器不會讀取display: none元素內容，性能消耗較大 visibility:hidden: 修改元素只會造成本元素的重繪,性能消耗較少讀屏器讀取visibility: hidden元素內容 opacity: 0 ： 修改元素會造成重繪，性能消耗較少

　　聯系：它們都能讓元素不可見

　　補充：株連性 如果祖先元素遭遇某禍害，則其子孫孫無一例外也要遭殃，比如： opacity:0和display:none，若父節點元素應用了opacity:0和display:none，無論其子孫元素如何掙扎都不會再出現在大眾視野； 而若父節點元素應用visibility:hidden，子孫元素應用visibility:visible，那么其就會毫無意外的顯現出來。

總結：

1. display: none (不占空間，不能點擊)（場景，顯示出原來這里不存在的結構）
2. visibility: hidden（占據空間，不能點擊）（場景：顯示不會導致頁面結構發生變動，不會撐開）
3. opacity: 0（占據空間，可以點擊）（場景：可以跟transition搭配）

總結：

• display: none;

1. DOM 結構：瀏覽器不會渲染 display 屬性為 none 的元素，不占據空間；
2. 事件監聽：無法進行 DOM 事件監聽；
3. 性能：動態改變此屬性時會引起重排，性能較差；
4. 繼承：不會被子元素繼承，畢竟子類也不會被渲染；
5. transition：transition 不支持 display。

• visibility: hidden;

1. DOM 結構：元素被隱藏，但是會被渲染不會消失，占據空間；
2. 事件監聽：無法進行 DOM 事件監聽；
3. 性 能：動態改變此屬性時會引起重繪，性能較高；
4. 繼 承：會被子元素繼承，子元素可以通過設置 visibility: visible; 來取消隱藏；
5. transition：transition 不支持 display。

• opacity: 0;

1. DOM 結構：透明度為 100%，元素隱藏，占據空間；
2. 事件監聽：可以進行 DOM 事件監聽；
3. 性 能：提升為合成層，不會觸發重繪，性能較高；
4. 繼 承：會被子元素繼承,且，子元素並不能通過 opacity: 1 來取消隱藏；
5. transition：transition 不支持 opacity。