CSS : Visibility 和 Display 屬性的比較 - 建站學院 - 源碼網

CSS : Visibility 和 Display 屬性的比較(2010-04-12)

如果你想改變一個 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 去隱藏內容。

原文地址:http://blog.imbolo.com/css-visibility-vs-display/

上一篇:CSS pointer-events下層元素被點擊

下一篇:利用路徑及圖層樣式制作飛濺的牛奶

關于本站  |  版權聲明 | 合作聯系 | 網站地圖 | 幫助中心 |  | XHTML/CSS
Copyright © 2004-2010 downcodes.com 程序支持:木翼 冀ICP備05003145號
本站誠招服務器贊助商
贵州11选5漏选情况 娱乐棋牌? 融资融券类股票 大唐棋牌? 股票申购流程 电脑赚钱网站 中科曙光股票股吧 15选5开奖结果走 炒股用手机能开户吗 36选7大赢家 宜昌血流麻将微信群