學習目標：

學過CSS的盆友（本人）都知道隱藏元素有三種方式：

1. display
2. visibility
3. opacity

那麼這三種方式的區別是什麼呢？？我就在這裡來悄咪咪學習一下。

---

學習內容：

話不多說，直接開始：

1. display：none；

• DOM結構：瀏覽器不會渲染display屬性為none的元素，不佔據空間，意思就是頁面上沒有它的一席之地，你在開發者模式中選不中那個元素。
• 事件監聽：無法進行DOM事件監聽。
• 效能：動態改變此屬性時會引起重排，效能較差。
• 繼承：不會被子元素繼承，因為子元素也不被渲染。
• transtion過渡不支援display。

2. visibility：hidden；

• DOM結構：元素被隱藏了，瀏覽器會渲染visibility屬性為hidden的元素，佔據空間，意思就是頁面上有它的空間，在開發者模式中能選中那個元素。
• 事件監聽：無法進行DOM事件監聽。
• 效能：動態改變此屬性時會引起重繪，效能較高。
• 繼承：會被子元素繼承，子元素通過設定visibility:visible;來顯示自身，使子元素取消自身隱藏。
• transtion：visibility會立即顯示，隱藏時會延時。

3. opacity：0；

• DOM結構：opacity屬性值為0時透明度為100%，元素隱藏，佔據空間，opacity值為0到1，為1時顯示元素。
• 事件監聽：可以進行DOM事件監聽。
• 效能：提升為合成層，不會引發重繪，效能較高。
• 繼承：會被子元素繼承，子元素不能通過設定opacity:1;來取消隱藏。。
• transtion：opacity可以延時顯示與隱藏。

---

學習總結：

學習到這裡，產生疑問：重排和重繪是什麼？
接下來我會繼續去學習重排和重繪。