CSS中Visibility和Display屬性的區(qū)別是什么，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

站在用戶的角度思考問題，與客戶深入溝通，找到王益網(wǎng)站設(shè)計與王益網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、主機域名、虛擬主機、企業(yè)郵箱。業(yè)務(wù)覆蓋王益地區(qū)。

CSS DIV中Visibility和Display屬性的區(qū)別

這里有個Demo可以比較visibility：hidden和display：none的區(qū)別。點擊頁面上部的鏈接，頁面里綠色的Div將會進行相應(yīng)的改變。請留意一下當(dāng)綠色的Div屬性分別被設(shè)為visibility：hidden和display：none時對其它元素會有什么影響。

CSS DIV中Visibility屬性的用法

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

以下為引用的內(nèi)容：

visibility:visible
/*元素可見，默認值*/
visibility:hidden
/*元素不可見，但仍然為其保留相應(yīng)的空間*/
visibility:collapse
/*只對table對象起作用，能移除行或列但不會影響表格的布局。如果這個值用在table以外的對象上則表現(xiàn)為hidden。*/
visibility:inherit
/*繼承上級元素的visibility值。*/

CSS DIV中Display屬性的用法

Display屬性的可用值有很多，但在這里我們只關(guān)注其中的幾個值：block、none和inline。

以下為引用的內(nèi)容：

display:none
/*元素不可見，并且不為其保留相應(yīng)的位置*/
display:block
/*表現(xiàn)為一個塊級元素（一般情況下獨占一行）*/
display:inline
/*表現(xiàn)為一個行級元素（一般情況下不獨占一行）*/

從這里可以看出，雖然Visibility和Display屬性都可以隱藏一個元素，但它們之間的不同點在于visibility：hidden在隱藏一個元素的同時仍然在頁面上為該元素保留所需的空間，而display：none則表現(xiàn)得像把元素從頁面里刪除了，在頁面上看不出該元素還存在著。

另外，display：block和display：inline的區(qū)別在于block元素會在頁面中獨占一行，而inline元素不會，有的對象默認為block元素，而有的對象則默認為inline元素，大家在使用時需要注意防止相同屬性的重復(fù)定義。

CSS DIV中什么時候使用Visibility或者Display屬性？

Visibility和Display屬性雖然都可以達到隱藏頁面元素的目的，但它們的區(qū)別在于如何回應(yīng)正常文檔流。

如果你想隱藏某元素，但在頁面上保留該元素的空間的話，你應(yīng)該使用visibility：hidden。如果你想在隱藏某元素的同時讓其它內(nèi)容填充空白的話應(yīng)該使用display：none。

在現(xiàn)實中我（作者）更多的傾向于使用display屬性（相信這也是大多數(shù)人的習(xí)慣，bolo注）。當(dāng)你決定用display：none來隱藏一個元素時，你必須知道其它內(nèi)容將填充到該元素留下的空白位置，從而改變頁面的布局。

CSS DIV中Visibility和Display對SEO的影響

有時我們會通過把堆砌的關(guān)鍵詞隱藏而達到作弊的目的，但不應(yīng)該使用visibility：hidden和display：none，而應(yīng)該把關(guān)鍵詞顏色設(shè)為和背景色相同，或者把關(guān)鍵詞的字號設(shè)為非常小，而令訪客無法發(fā)現(xiàn)。

有的人則因為害怕搜索蜘蛛的的反感而為visibility：hidden和display：none的使用的煩惱。其實有很多漂亮的效果是通過元素可見性的轉(zhuǎn)換而實現(xiàn)的，搜索引擎也理解這一做法（事實上搜索引擎往往忽略CSS，bolo注），因此如果你的目的不是欺騙搜索引擎，你大可以放心地使用visibility：hidden和display：none去隱藏內(nèi)容。

看完上述內(nèi)容，你們掌握CSS中Visibility和Display屬性的區(qū)別是什么的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！