CSS:opacity:0,visibility:hidden,display:none的區別

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

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://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden