css實現隱藏元素效果

display: none

1、DOM結構: 瀏覽器不會渲染display:none 的元素, 並且不佔據頁面空間

2、事件監聽: 無法對元素進行事件監聽

3、繼承: 不會被子元素繼承(子元素設定display: block 不會顯示)

4、改動: 改變屬性值會造成頁面的重排與重繪

5、過渡: 無法設定過渡效果 transition: display無效

（影片教學建議：css影片教學）

visibility: hidden

1、不會被渲染,但是會佔據頁面空間

2、無法對元素設定事件監聽

3、可以繼承,子元素設定非visibility:hidden可以顯示

4、改動屬性只會造成頁面重排

5、transition:visibility會立即顯示, hidden有過渡效果

opacity: 0

1、元素被隱藏, 會佔據頁面空間

2、可以設定事件監聽

#3、可以繼承, 子元素設定opacity可以顯示

4、不會重繪也不會重排

5、transition: opacity 可以實現顯示隱藏的過渡效果

6、opacity 會觸發硬體加速

推薦教學：css快速入門

以上是css實現隱藏元素效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！