1. display: none、visibility: hidden與opacity: 0的區別
display: none、visibility: hidden與opacity: 0都可以讓元素隱藏，它們之間的區別見下表：
| 特性（行爲） | display: none | visibility: hidden | opacity: 0 |
|---|---|---|---|
| 在渲染樹中 | 否 | 是 | 是 |
| 佔據空間 | 否 | 是 | 是 |
| 可點擊 | 否 | 否 | 是 |
| 子節點可修改 | 否 | 是 | 否 |
| transition | 無效 | 無效 | 有效 |
| 性能 | 導致迴流，性能消耗大 | 導致重繪，性能消耗較小 | 導致重繪，性能消耗較小 |
表格的解讀：
display:none其實很好理解，只要記住設置該屬性的元素並不會出現在渲染樹中這一點就行了，那麼其他的一些特性（行爲）想想也知道了：肯定不佔據頁面空間、不可點擊、子節點也不可修改、transition無效，這些其實都是廢話，皮之不存，毛將焉附？
display:none屬性的添加或去除，相當於在渲染樹中增加或刪除節點，這對整體頁面的結構造成了巨大的影響，結構變了，那肯定得重新計算尺寸、然後再繪製，性能消耗當然大咯~visibility: hidden只是將元素隱藏了而已，設置該屬性的元素還是會出現在渲染樹中，其子元素可以通過設置visibility: visible顯示出來。
visibility屬性並不會改變頁面元素的結構和尺寸，所以只需重新繪製一下即可，性能消耗較小。opacity: 0只是讓元素的透明度變0，它還是存在於渲染樹中，並且佔據中間、可點擊觸發事件。
opacity也不對元素的結構和尺寸造成影響，所以只需重新繪製一下即可，性能消耗也較小。
2. 補充：其他隱藏元素的方法
- 設置
position屬性值爲fixed(absolute、relative)並設置足夠大負距離left、top使其“隱藏”； - 用層疊關係
z-index將元素置於最底層； - 設置
hight: 0，同時overflow: hidden； text-indent: -9999px使文字隱藏。
本文參考整理自：
分析比較 opacity: 0、visibility: hidden、display: none 優劣和適用場景