大多數人很容易將css屬性display和visibility混淆，它們看似沒有什麼不同，其實它們的差別卻是很大的。visibility和display兩個屬性都有隱藏元素的功能。visibility屬性所控制的元素雖然不在瀏覽器裡面顯示出來，但他在瀏覽區里是存在的，只是不顯示而已。而display屬性設定為none，這個元素就變成了乙個不顯示的元素。
一、display的屬性值
block：
/*表現為乙個塊級元素（一般情況下獨佔一行）*/
當display被設定為block(塊)時，容器中所有的元素將會被當作乙個單獨的塊，就像元素一樣，它會在那個點被放入到頁面中。(實際上你可以設定的display:block，使其可以像一樣工作。
inline:
/*表現為乙個行級元素（一般情況下不獨佔一行）*/
將display設定為inline，將使其行為和元素inline一樣---即使它是普通的塊元素如，它也將會被組合成像那樣的輸出流。
none:
/*元素不可見，並且不為其保留相應的位置*/
最後是display被設定：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、在屬性值設為block的元素後面新增新行
2、從屬性值設為inline的元素所在行中刪除一行
3、隱藏屬性值設為none的元素並且釋放該元素在文件中所佔的物理空間，對於其他元素來說，相當於該元素不存在，因此，該元素的位置被其他元素頂替
四、visibility的屬性值
visibility:visible
/*元素可見，預設值*/
visibility:hidden
/*元素不可見，但仍然為其保留相應的空間*/
visibility:collapse
/*只對table物件起作用，能移除行或列但不會影響**的布局。如果這個值用在table以外的物件上則表現為hidden。*/
visibility:inherit
/*繼承上級元素的visibility值。*/
五、visibility特性
用來確定元素是顯示還是隱藏，這用visibility="visible|hidden"來表示，visible表示顯示，hidden表示隱藏。當visibility被設定為"hidden"的時候，元素雖然被隱藏了，但它仍然佔據它原來所在的位置。
六、由以上可以了解到 visibility:none 和 display:hidden 的區別
display:none;
使用該屬性後，html元素（物件）的寬度、高度等各種屬性值都將「丟失」;
visibility:hidden;
使用該屬性後，html元素（物件）僅僅是在視覺上看不見（完全透明），而它所佔據的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。
七、什麼時候使用visibility或者display屬性？
visibility和display屬性雖然都可以達到隱藏頁面元素的目的，但它們的區別在於如何回應正常文件流。
如果你想隱藏某元素，但在頁面上保留該元素的空間的話，你應該使用visibility：hidden。如果你想在隱藏某元素的同時讓其它內容填充空白的話應該使用display：none。
在現實中我（作者）更多的傾向於使用display屬性（相信這也是大多數人的習慣，bolo注）。當你決定用display：none來隱藏乙個元素時，你必須知道其它內容將填充到該元素留下的空白位置，從而改變頁面的布局。
八、使用visibility或者display屬性的注意事項
display:none:
1、js讀取元素屬性值
如果在樣式檔案或頁面檔案**中直接用display:none對元素進行了隱藏，載入頁面後，在沒有通過js設定樣式使元素顯示的前提下，使用js**會無法正確獲得該元素的一些屬性，比如offsettop,offsetleft等，返回的值會為0，通過js設定style.display來使元素顯示後才能正確獲得這些值。
2、seo優化時需要注意
3、樣式檔案
如果是通過樣式檔案或方式來設定元素的display:none樣式，用js設定style.display=""並不能使元素顯示，可以使用block或inline等值來代替。通過style="display:none"直接在元素上進行的設定不會有這個問題
4、有些情況下可以使用style.visibility來代替style.display，但是要注意的是style.visibility隱藏元素時會保留元素在頁面上所佔的空間，而style.display隱藏元素且讓出所佔頁面空間。
visibility:hidden:
如果想讓某一段**在前台不顯示，最簡單的方法是用css的display:none,這樣，下邊的內容就自動填補這個空隙。但是在一些特殊的情況下，我們只需要隱藏這個元素，但它的位置不能被占用了，那麼，visibility:hidden就可以實現這個要求。
visibility和display的區別和用法
div的visibility可以控制div的顯示和隱藏，但是隱藏後頁面顯示空白 style visibility none document.getelementbyid typediv1 style.visibility hidden 隱藏 document.getelementbyid type...
display的block和inline屬性
block元素特點 1.處於常規流中時，如果width沒有設定，會自動填充滿父容器 2.可以應用margin padding 3.在沒有設定高度的情況下會擴充套件高度以包含常規流中的子元素 4.處於常規流中時布局時在前後元素位置之間 獨佔乙個水平空間 5.忽略vertical align inlin...
display和visibility的區別
display通常可以設定為none inline block visibility通常可以設定為hidden visible display的顯示和隱藏在前端用的很多，這樣他可以減少頁面的空間的使用了，不占用原來的頁面的空間，比如說彈框等。並且diplay inline可以改變標籤的屬性，行級標籤...