CSS 中Visibility 和 Display 屬性的比較

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

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

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

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

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

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

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

什么時(shí)候使用 Visibility 或者 Display 屬性？
Visibility 和 Display 屬性雖然都可以達(dá)到隱藏頁(yè)面元素的目的，但它們的區(qū)別在于如何回應(yīng)正常文檔流。

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

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

Visibility 和 Display 對(duì) SEO 的影響
有時(shí)我們會(huì)通過(guò)把堆砌的關(guān)鍵詞隱藏而達(dá)到作弊的目的，但不應(yīng)該使用 visibility: hidden 和 display: none ，而應(yīng)該把關(guān)鍵詞顏色設(shè)為和背景色相同，或者把關(guān)鍵詞的字號(hào)設(shè)為非常小，而令訪客無(wú)法發(fā)現(xiàn)。

有的人則因?yàn)楹ε滤阉髦┲氲牡姆锤卸鵀?visibility: hidden 和 display: none 的使用的煩惱。其實(shí)有很多漂亮的效果是通過(guò)元素可見(jiàn)性的轉(zhuǎn)換而實(shí)現(xiàn)的，搜索引擎也理解這一做法（事實(shí)上搜索引擎往往忽略 CSS，bolo 注），因此如果你的目的不是欺騙搜索引擎，你大可以放心地使用 visibility: hidden 和 display: none 去隱藏內(nèi)容。

原文鏈接：Visibility vs Display in CSS
轉(zhuǎn)載出處：http://blog.imbolo.com/css-visibility-vs-display/

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)