如果你想改變一個HTML元素的可見性，你會把這個元素的CSS屬性改為 visibility：hidden還是display：none？這兩個屬性有什麼不同？在頁面元素可見性改變時你如何應對？
visibility和display屬性的區別這裡有個Demo可以比較 visibility：hidden和display：none 的區別。點擊頁面上部的鏈接，頁面裡綠色的 Div 將會進行相應的改變。請留意一下當綠色的 Div 屬性分別被設為 visibility： hidden 和 display： none 時對其它元素會有什麼影響。
visibility 屬性的用法visibility 屬性共有四個可用的值（visible、hidden、collapse 和 inherit），但常用的值是 visible 和 hidden。
visibility: visible /* 元素可見，默認值*/ visibility: hidden /* 元素不可見，但仍然為其保留相應的空間*/ visibility: collapse /* 只對 table 對象起作用，能移除行或列但不會影響表格的布局。如果這個值用在 table 以外的對象上則表現為 hidden 。*/ visibility: inherit /* 繼承上級元素的 visibility 值。*/display 屬性的用法
display 屬性的可用值有很多，但在這裡我們只關注其中的幾個值：block、none 和 inline 。
display: none /* 元素不可見，並且不為其保留相應的位置*/ display: block /* 表現為一個塊級元素（一般情況下獨占一行）*/ display: inline /* 表現為一個行級元素（一般情況下不獨占一行）*/
從這裡可以看出，雖然 visibility 和 display 屬性都可以隱藏一個元素，但它們之間的不同點在於 visibility： hidden 在隱藏一個元素的同時仍然在頁面上為該元素保留所需的空間，而 display： none 則表現得像把元素從頁面裡刪除了，在頁面上看不出該元素還存在著。
另外，display： block 和 display： inline 的區別在於 block 元素會在頁面中獨占一行，而 inline 元素不會，有的對象默認為 block 元素，而有的對象則默認為 inline 元素，大家在使用時需要注意防止相同屬性的重復定義。
什麼時候使用 visibility 或者 display 屬性？visibility和display屬性雖然都可以達到隱藏頁面元素的目的，但它們的區別在於如何回應正常文檔流。
如果你想隱藏某元素，但在頁面上保留該元素的空間的話，你應該使用 visibility： hidden 。如果你想在隱藏某元素的同時讓其它內容填充空白的話應該使用 display：none 。
在現實中我（作者）更多的傾向於使用 display 屬性（相信這也是大多數人的習慣，bolo 注）。當你決定用 display： none 來隱藏一個元素時，你必須知道其它內容將填充到該元素留下的空白位置，從而改變頁面的布局。
visibility和display對SEO的影響有時我們會通過把堆砌的關鍵詞隱藏而達到作弊的目的，但不應該使用 visibility： hidden 和 display： none ，而應該把關鍵詞顏色設為和背景色相同，或者把關鍵詞的字號設為非常小，而令訪客無法發現。
有的人則因為害怕搜索蜘蛛的的反感而為 visibility： hidden 和 display： none 的使用的煩惱。其實有很多漂亮的效果是通過元素可見性的轉換而實現的，搜索引擎也理解這一做法（事實上搜索引擎往往忽略 CSS，bolo 注），因此如果你的目的不是欺騙搜索引擎，你大可以放心地使用 visibility：hidden 和 display：none 去隱藏內容。
本文來源：Bolo的博客（http://blog.imbolo.com/css-visibility-vs-display/）