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中文網其他相關文章!