display、visibility、opacity的区别
生活随笔
收集整理的這篇文章主要介紹了
display、visibility、opacity的区别
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我們常設置display:none、visibility:hidden、opacity:0來隱藏元素,但是在實際使用中會有問題
(1)元素隱藏時是否在DOM中存在?
- display:不占據空間,會導致回流產生
- visibility:占據空間,不會導致回流
- opacity:占據空間,僅視覺上透明度為0
(2)隱藏元素綁定事件是否有效?
- display、visibility綁定事件無效
- opacity綁定事件有效
(3)該屬性是否會被子元素繼承?
- display不會被子元素繼承,給子元素設置block無效
- visibility會被子元素繼承,子元素設置visible有效
- opacity會被子元素繼承,子元素設置1無效
總結
以上是生活随笔為你收集整理的display、visibility、opacity的区别的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Java实现 LeetCode 203
- 下一篇: 广播——broadcast