首頁 > web前端 > css教學 > 主體

css實現隱藏元素效果

王林
發布: 2020-05-14 09:12:09
轉載
2604 人瀏覽過

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

相關標籤:
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板