display和visibility的用法和区别
大多數(shù)人很容易將CSS屬性display和visibility混淆，它們看似沒有什么不同，其實它們的差別卻是很大的。visibility和display兩個屬性都有隱藏元素的功能。visibility屬性所控制的元素雖然不在瀏覽器里面顯示出來，但他在瀏覽區(qū)里是存在的，只是不顯示而已。而display屬性設(shè)置為none，這個元素就變成了一個不顯示的元素。
?
一、Display的屬性值
block：
/*表現(xiàn)為一個塊級元素（一般情況下獨占一行）*/
當display被設(shè)置為block(塊)時，容器中所有的元素將會被當作一個單獨的塊，就像<DIV>元素一樣，它會在那個點被放入到頁面中。(實際上你可以設(shè)置<span>的display:block，使其可以像<DIV>一樣工作。
inline:
/*表現(xiàn)為一個行級元素（一般情況下不獨占一行）*/
將display設(shè)置為inline，將使其行為和元素inline一樣---即使它是普通的塊元素如<DIV>，它也將會被組合成像<span>那樣的輸出流。
none:
/*元素不可見，并且不為其保留相應(yīng)的位置*/
最后是display被設(shè)置：none,這時元素實際上就從頁面中被移走，它下面所在的元素就會被自動跟上填充。
?
二、Display的使用
?
1、display默認屬性值為塊級的元素：
adress,quote,body,xmp,center,col,colgroup,dd,dtr,div,
dl,dt,fieldset,form,hn,hr,iframe,legend,listing,marquee,
menu,ol,p,plaintext,pre,table,td,th,tr,ul
?
2、display默認屬性值為none的元素：
br,frame,nextid,tbody,tfoot,thead
?
3、li元素的display屬性默認值為：list-item
4、其他元素display屬性默認值都為inline
?
三、Display的特性
?
改變元素的display屬性將對周圍元素造成的影響有：
1、在屬性值設(shè)為block的元素后面添加新行
2、從屬性值設(shè)為inline的元素所在行中刪除一行
3、隱藏屬性值設(shè)為none的元素并且釋放該元素在文檔中所占的物理空間，對于其他元素來說，相當于該元素不存在，因此，該元素的位置被其他元素頂替
?
四、visibility的屬性值
visibility:visible
/*元素可見，默認值*/
visibility:hidden
/*元素不可見，但仍然為其保留相應(yīng)的空間*/
visibility:collapse
/*只對table對象起作用，能移除行或列但不會影響表格的布局。如果這個值用在table以外的對象上則表現(xiàn)為hidden。*/
visibility:inherit
/*繼承上級元素的visibility值。*/
?
?五、visibility特性
用來確定元素是顯示還是隱藏，這用visibility="visible|hidden"來表示，visible表示顯示，hidden表示隱藏。當visibility被設(shè)置為"hidden"的時候，元素雖然被隱藏了，但它仍然占據(jù)它原來所在的位置。
?
六、由以上可以了解到 Visibility:none 和 Display:hidden 的區(qū)別
?
display:none;
使用該屬性后，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”;
visibility:hidden;
使用該屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據(jù)的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。
?
七、什么時候使用Visibility或者Display屬性？
Visibility和Display屬性雖然都可以達到隱藏頁面元素的目的，但它們的區(qū)別在于如何回應(yīng)正常文檔流。
如果你想隱藏某元素，但在頁面上保留該元素的空間的話，你應(yīng)該使用visibility：hidden。如果你想在隱藏某元素的同時讓其它內(nèi)容填充空白的話應(yīng)該使用display：none。
在現(xiàn)實中我（作者）更多的傾向于使用display屬性（相信這也是大多數(shù)人的習(xí)慣，bolo注）。當你決定用display：none來隱藏一個元素時，你必須知道其它內(nèi)容將填充到該元素留下的空白位置，從而改變頁面的布局。
?
八、使用Visibility或者Display屬性的注意事項
display:none:
1、JS讀取元素屬性值
如果在樣式文件或頁面文件代碼中直接用display:none對元素進行了隱藏，載入頁面后，在沒有通過js設(shè)置樣式使元素顯示的前提下，使用js代碼會無法正確獲得該元素的一些屬性，比如offSetTop,offSetLeft等，返回的值會為0，通過js設(shè)置style.display來使元素顯示后才能正確獲得這些值。
2、SEO優(yōu)化時需要注意
使用display:none隱藏的元素不會被百度等搜索網(wǎng)站檢索，會影響到網(wǎng)站的SEO，某些情況下可以使用left:-100000px來達到同樣效果。
3、樣式文件
如果是通過樣式文件或<style>css</style>方式來設(shè)置元素的display:none樣式，用js設(shè)置style.display=""并不能使元素顯示，可以使用block或inline等值來代替。通過style="display:none"直接在元素上進行的設(shè)置不會有這個問題
4、有些情況下可以使用style.visibility來代替style.display，但是要注意的是style.visibility隱藏元素時會保留元素在頁面上所占的空間，而style.display隱藏元素且讓出所占頁面空間。
?
visibility:hidden:
如果想讓某一段代碼在前臺不顯示，最簡單的方法是用css的display:none,這樣，下邊的內(nèi)容就自動填補這個空隙。但是在一些特殊的情況下，我們只需要隱藏這個元素，但它的位置不能被占用了，那么，visibility:hidden就可以實現(xiàn)這個要求。
總結(jié)
以上是生活随笔為你收集整理的display和visibility的用法和区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： dubbo项目搭建
- 下一篇： 7-1 公路村村通 (30 分)（C语言