display屬性定義： 可以將頁面元素隱藏或者顯示出來，也可以將元素強制改成塊級元素或內聯元素，在頁面佈局和JavaScript特效中常常用到display屬性。

display屬性值：none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-colume-group | table-column | table-cell | table-caption | inherit

display常用屬性值： inline、block、inline-block和none，接下來對display常用屬性值進行分析。

inline: 預設值，特徵：內容撐開寬度，不會獨佔一行，不支援寬高，程式碼換行會被解析成空格。例如：

<div>
    <li><a href="">首頁</a></li>
    <li><a href="">新聞</a></li>
    <li><a href="">娛樂</a></li>
</div>

<style type="text/css">
    a{
        background: orange;
    }
    li{
        display:inline;
    }
</style>

將li標籤的display屬性設定為inline後，a標籤中的元素以內嵌的形式排列成行顯示

block： 特徵：不設定寬度時寬度為父元素的寬度，獨佔一行，支援寬高。例如：

<div>
    <a href="">首頁</a>
    <a href="">新聞</a>
    <a href="">娛樂</a>
</div>

<style type="text/css">
    a{
        background: orange;
        display: block;
        margin: 10px;
    }
</style>

將a標籤的display屬性值設定為block後，a標籤中的元素將以塊狀顯示。

inline-block： 特徵：不設定寬度時，內容撐開寬度；不會獨佔一行，支援寬高，程式碼換行被解析成空格。總之，將物件呈現為inline，但是物件的內容作為block呈現，使其既具有block的寬度高度特性又具有inline的同行特性。

none: 特徵：隱藏元素並脫離文件流，即隱藏時不佔用空間。
注意 ：visibility屬性同樣具有將頁面中的元素隱藏，但元素設定為visibility:hidden 後，被隱藏的元素依然佔用原來的空間。

總結一下常見的塊級元素和內聯元素：
塊級： div | form | table | p | h1-h6 | dl | ul | ol
內聯： span | a | label | input | select | textarea | img