display visibility opacity隐藏元素的区别
2017-03-05
我们都知道隐藏元素通常使用的方法是
display: none
,不过很明显这不是唯一的一种方式,CSS2的visibility: hidden
和CSS3的opacity: 0
均可以隐藏元素,那么他们的区别是什么
css | 是否占据空间 | 是否可以触发事件 | 是否受tab控制
—————– | —–| —- | ——–
display: none | No | No | No
visibility: hidden| Yes | No | No
opacity: 0 | Yes | Yes | Yes
总结一下
opacity: 0
其实只是透明度是0,所以看不见,元素本身还在那,他的事件,占据的空间,默认行为都还在display: none
和visibility: hidden
都是隐藏元素,所以元素的默认行为,绑定的事件均失效visibility: hidden
会占据空间,而且它的子元素如果被设置为visibility: visible
,那么这个子元素会单独显示出来- 只有opacity的隐藏才会实现transition的过渡动画