display: none;visibility: hiddenopacity=0区别总结

Posted MY0101

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了display: none;visibility: hiddenopacity=0区别总结相关的知识,希望对你有一定的参考价值。

display: none;

1、浏览器不会生成属性为display: none;的元素。 
2、display: none;不占据空间(毕竟都不熏染啦),所以动态改变此属性时会引起重排。 
3、display: none;不会被子类继承,但是···子类是不会显示的,毕竟都一起被kill啦。 
4、display,是个尴尬的属性,transition对她无效。(毫无争议)


visibility: hidden;

1、元素会被隐藏,但是不会消失,依然占据空间。 
2、visibility: hidden会被子类继承,子类也可以通过显示的设置visibility: visible;来反隐藏。 
3、visibility: hidden;不会触发该元素已经绑定的事件。 
4、visibility: hidden;动态修改此属性会引起重绘。 
5、visibility,transition对她无效。(亲测)


opacity=0

1、opacity=0只是透明度为100%,元素隐藏,依然占据空间。 
2、opacity=0会被子元素继承,且,子元素并不能通过opacity=1,进行反隐藏。不能。 
3、opacity=0的元素依然能触发已经绑定的事件。 
4、opacity,transition对她有效(毫无争议)

摘自:http://blog.csdn.net/WRian_Ban/article/details/51958195

以上是关于display: none;visibility: hiddenopacity=0区别总结的主要内容,如果未能解决你的问题,请参考以下文章

display:none与visible:hidden的区别

前端面试题-display:none和visibility:hidden的区别

使用 jQuery 选择样式为“visibility:visible”或“visibility:hidden”而不是“display:none”的项目

display:none vs visibility:hidden

display:none;visibility:hidden;和opacity:0;的区别

display: none;visibility: hiddenopacity=0区别总结