大多數都不知道display:none visibility:hidden opacity:0 區別

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：visibility 會當即顯示，隱藏時會延時

opacity: 0;

1. DOM 結構：透明度爲 100%，元素隱藏，佔據空間；

2. 事件監聽：能夠進行 DOM 事件監聽；

3. 性 能：提高爲合成層，不會觸發重繪，性能較高；

4. 繼 承：會被子元素繼承,且，子元素並不能經過 opacity: 1 來取消隱藏；

5. transition：opacity 能夠延時顯示和隱藏

 

對了，小編爲你們準備了一套2020最新的web前端資料，須要點擊下方連接獲取方式

學習前端，你掌握這些。二線也能輕鬆拿8K以上