結構：

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

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

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

場景：

display:none:顯示出原來這裡不存在的結構

visibility:hidden:顯示不會導致頁面結構發生變動，不會撐開，可以跟transition搭配

opacity:0:可以跟transition搭配， 自定義圖片上傳按鈕

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