1.display: none
- DOM 結構：瀏覽器不會渲染 display 屬性爲 none 的元素，會讓元素完全從渲染樹中消失，渲染的時候不佔據任何空間；
- 事件監聽：無法進行 DOM 事件監聽，不能點擊；
- 性能：修改元素會造成文檔迴流（reflow 與 repaint）,讀屏器不會讀取display: none元素內容，性能消耗較大；
- 繼承：是非繼承屬性，由於元素從渲染樹消失，造成子孫節點消失，即使修改子孫節點屬性子孫節點也無法顯示，畢竟子類也不會被渲染；
- 場景：顯示出原來這裏不存在的結構；
- transition：transition 不支持 display。
2.visibility: hidden
- DOM 結構：不會讓元素從渲染樹消失，渲染元素繼續佔據空間，只是內容不可見；
- 事件監聽：無法進行 DOM 事件監聽，不能點擊；
- 性能：修改元素只會造成本元素的重繪（repaint），是重回操作，比迴流操作性能高一些，性能消耗較少；讀屏器讀取visibility: hidden元素內容；
- 繼承：是繼承屬性，子孫節點消失是由於繼承了visibility: hidden，子元素可以通過設置 visibility: visible 來取消隱藏；
- 場景：顯示不會導致頁面結構發生變動，不會撐開；
- transition：transition 支持 visibility，visibility 會立即顯示，隱藏時會延時。
3.opacity: 0
- DOM 結構：透明度爲 100%，不會讓元素從渲染樹消失，渲染元素繼續佔據空間，只是內容不可見；
- 事件監聽：可以進行 DOM 事件監聽，可以點擊；
- 性能：提升爲合成層，是重建圖層，不和動畫屬性一起則不會產生repaint（不脫離文檔流，不會觸發重繪），性能消耗較少；
- 繼承：會被子元素繼承，且子元素並不能通過 opacity: 1 來取消隱藏；
- 場景：可以跟transition搭配；
- transition：transition 支持 opacity，opacity 可以延時顯示和隱藏。
打個比方：
display: none： 從這個世界消失了, 不存在了；
opacity: 0： 視覺上隱身了, 看不見, 可以觸摸得到；
visibility: hidden： 視覺和物理上都隱身了, 看不見也摸不到, 但是存在的；
附加題：CSS 隱藏頁面上的一個元素有哪幾種方法？
- display:none，visibility:hiden，opacity:0 這三種；
- 設置 fixed 並設置足夠大負距離的 left top 使其“隱藏”；
- 用層疊關係 z-index 把元素疊在最底下使其“隱藏”；
- 用 text-indent:-9999px 使其文字隱藏。