CSS3--3種隱藏元素方法的區別

目錄

• CSS3--3種隱藏元素方法的區別
  • display: none
  • visibility: hidden
  • opacity: 0

display: none

1. DOM結構: 瀏覽器不會渲染display:none 的元素, 並且不占據頁面空間
2. 事件監聽: 無法對元素進行事件監聽
3. 繼承: 不會被子元素繼承(子元素設置display: block 不會顯示)
4. 改動: 改動屬性值會引起頁面的重排和重繪
5. 過渡: 無法設置過渡效果 transition: display無效

visibility: hidden

1. 不會被渲染,但是會占據頁面空間
2. 無法對元素設置事件監聽
3. 可以繼承,子元素設置非visibility:hidden可以顯示
4. 改動屬性只會引起頁面重排
5. transition:visibility會立即顯示, hidden有過渡效果

opacity: 0

1. 元素被隱藏, 會占據頁面空間
2. 可以設置事件監聽
3. 可以繼承, 子元素設置opacity可以顯示
4. 不會重繪也不會重排
5. transition: opacity 可以實現顯示隱藏的過渡效果
6. opacity 會觸發硬件加速