建站
咨詢
售后
建站咨詢
新聞中心
你知道CSS DIV中Visibility和Display屬性有什么區(qū)別嗎，這里和大家分享一下，Visibility屬性共有四個(gè)可用的值（visible、hidden、collapse和inherit），但常用的值是visible和hidden，而Display屬性的可用值有很多，但在這里我們只關(guān)注其中的幾個(gè)值：block、none和inline。
創(chuàng)新互聯(lián)致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷(xiāo)，包括成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營(yíng)銷(xiāo)策劃推廣、電子商務(wù)、移動(dòng)互聯(lián)網(wǎng)營(yíng)銷(xiāo)等。創(chuàng)新互聯(lián)為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案，創(chuàng)新互聯(lián)核心團(tuán)隊(duì)10余年專注互聯(lián)網(wǎng)開(kāi)發(fā)，積累了豐富的網(wǎng)站經(jīng)驗(yàn)，為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù)，在網(wǎng)站建設(shè)行業(yè)內(nèi)樹(shù)立了良好口碑。
CSS DIV中Visibility和Display屬性的比較
如果你想改變一個(gè)HTML元素的可見(jiàn)性，你會(huì)把這個(gè)元素的CSS屬性改為visibility：hidden還是display：none？這兩個(gè)屬性有什么不同？在頁(yè)面元素可見(jiàn)性改變時(shí)你如何應(yīng)對(duì)？
CSS DIV中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ì)有什么影響。
CSS DIV中Visibility屬性的用法
Visibility屬性共有四個(gè)可用的值（visible、hidden、collapse和inherit），但常用的值是visible和hidden。
以下為引用的內(nèi)容：
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值。*/
CSS DIV中Display屬性的用法
Display屬性的可用值有很多，但在這里我們只關(guān)注其中的幾個(gè)值：block、none和inline。
以下為引用的內(nèi)容：
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ù)定義。
CSS DIV中什么時(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è)面的布局。
CSS DIV中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)楹ε滤阉髦┲氲牡姆锤卸鵀関isibility：hidden和display：none的使用的煩惱。其實(shí)有很多漂亮的效果是通過(guò)元素可見(jiàn)性的轉(zhuǎn)換而實(shí)現(xiàn)的，搜索引擎也理解這一做法（事實(shí)上搜索引擎往往忽略CSS，bolo注），因此如果你的目的不是欺騙搜索引擎，你大可以放心地使用visibility：hidden和display：none去隱藏內(nèi)容。
【編輯推薦】
- CSS中display屬性的妙用
- CSS布局中display:inline-block屬性用法詳解
- 探究CSS display屬性用法
- DIV CSS中id與class使用用原則與技巧
- 鼠標(biāo)經(jīng)過(guò)時(shí)改變DIV背景顏色的三種途徑
網(wǎng)站題目：CSS DIV中Visibility和Display屬性用法區(qū)別
本文網(wǎng)址：http://www.5511xx.com/article/djhegie.html
