CSS:opacity:0,visibility:hidden,display:none的区别

时间：2021-01-02 20:33:00

CSS中opacity=0,visibility=hidden,display=none的时候，三者有什么区别呢？？

参考了*的博客，才发现区别如下所示：

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):

  1. Collapses the space that the element would normally occupy
  2. Responds to events (e.g., click, keypress)
  3. 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://*.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden

相关文章