CSS:opacity:0,visibility:hidden,display:none的区别
浏览数：36 /
时间：2015年06月09日
CSS中opacity=0,visibility=hidden,display=none的时候，三者有什么区别呢？？
参考了stackoverflow的博客，才发现区别如下所示：
Here is a compilation of verified information from the various answers.
Each of these CSS properties is in fact unique. In addition to rendering an element not visible, they have the following additional effect(s):
- Collapses the space that the element would normally occupy
- Responds to events (e.g., click, keypress)
- Participates in the taborder
collapse events taborder opacity: 0 No Yes Yes visibility: hidden No No No visibility: collapse * No No display: none Yes No No * Yes inside a table element, otherwise No.
---objects with Visibility:hidden still have shape, they just arent visible. opacity zero elements can still be clicked and react to other events.
小结如下：
1 opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
2 visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
3 display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样
参考：
http://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden
CSS:opacity:0,visibility:hidden,display:none的区别,古老的榕树,5-wow.com
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
