一、Display的屬性值
block：
表現爲一個塊級元素（一般情況下獨佔一行
當display被設置爲block(塊)時，容器中所有的元素將會被當作一個單獨的塊，就像<DIV>元素一樣，它會在那個點被放入到頁面中。(實際上你可以設置<span>的display:block，使其可以像<DIV>一樣工作。
inline:
表現爲一個行級元素（一般情況下不獨佔一行）
將display設置爲inline，將使其行爲和元素inline一樣---即使它是普通的塊元素如<DIV>，它也將會被組合成像<span>那樣的輸出流。
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的屬性值
其漢語釋義爲：名詞，能見度，可見性，可視距離，清晰度。而display漢語直觀的解釋就是顯示。到這裏的時候我似乎有點頭緒，個人淺顯理解能見度即使調節爲不可見，似乎還存在於區域之間吧！接下來我們繼續看：
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優化時需要注意
使用display:none隱藏的元素不會被百度等搜索網站檢索，會影響到網站的SEO，某些情況下可以使用left:-100000px來達到同樣效果。
3、樣式文件
如果是通過樣式文件或<style>css</style>方式來設置元素的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就可以實現這個要求。
