CSS DIV中Visibility和Display屬性的區別

 若是你想改變一個HTML元素的可見性，你會把這個元素的CSS屬性改成visibility：hidden仍是display：none？這兩個屬性有什麼不一樣？在頁面元素可見性改變時你如何應對？

CSS DIV中Visibility和Display屬性的區別

這裏有個Demo能夠比較visibility：hidden和display：none的區別。點擊頁面上部的連接，頁面裏綠色的Div將會進行相應的改變。請留意一下當綠色的Div屬性分別被設爲visibility：hidden和display：none時對其它元素會有什麼影響。

CSS DIV中Visibility屬性的用法

Visibility屬性共有四個可用的值（visible、hidden、collapse和inherit），但經常使用的值是visible和hidden。

如下爲引用的內容：

visibility:visible

visibility:hidden

visibility:collapse

visibility:inherit

CSS DIV中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元素，你們在使用時須要注意防止相同屬性的重複定義。

CSS DIV中何時使用Visibility或者Display屬性？

Visibility和Display屬性雖然均可以達到隱藏頁面元素的目的，但它們的區別在於如何迴應正常文檔流。

若是你想隱藏某元素，但在頁面上保留該元素的空間的話，你應該使用visibility：hidden。若是你想在隱藏某元素的同時讓其它內容填充空白的話應該使用display：none。

在現實中我（做者）更多的傾向於使用display屬性（相信這也是大多數人的習慣，bolo注）。當你決定用display：none來隱藏一個元素時，你必須知道其它內容將填充到該元素留下的空白位置，從而改變頁面的佈局。

CSS DIV中Visibility和Display對SEO的影響

有時咱們會經過把堆砌的關鍵詞隱藏而達到做弊的目的，但不該該使用visibility：hidden和display：none，而應該把關鍵詞顏色設爲和背景色相同，或者把關鍵詞的字號設爲很是小，而令訪客沒法發現。

有的人則由於懼怕搜索蜘蛛的的反感而爲visibility：hidden和display：none的使用的煩惱。其實有不少漂亮的效果是經過元素可見性的轉換而實現的，搜索引擎也理解這一作法（事實上搜索引擎每每忽略CSS，bolo注），所以若是你的目的不是欺騙搜索引擎，你大能夠放心地使用visibility：hidden和display：none去隱藏內容。

web頁面前臺編碼時常常用到display:none樣式，日常使用時發現有幾點特徵須要注意 ：

    一、若是在樣式文件或頁面文件代碼中直接用display:none對元素進行了隱藏，載入頁面後，在沒有經過js設置樣式使元素顯示的前提下，使用js 代碼會沒法正確得到該元素的一些屬性，好比offSetTop,offSetLeft等，返回的值會爲0，經過js設置style.display來使元 素顯示後才能正確得到這些值。  二、使用display:none隱藏的元素不會被百度等搜索網站檢索，會影響到網站的SEO，某些狀況下可使用left:-100000px來達到一樣效果。  三、若是是經過樣式文件或<style>css</style>方式來設置元素的display:none樣式，用js設置 style.display=""並不能使元素顯示，可使用block或inline等值來代替。經過style="display:none"直接在 元素上進行的設置不會有這個問題  四、有些狀況下可使用style.visibility來代替style.display，可是要注意的是style.visibility隱藏元素時會保留元素在頁面上所佔的空間，而style.display隱藏元素且讓出所佔頁面空間。