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