display屬性
首先，所有主流瀏覽器都支持 display 屬性。其次，我們都知道display 屬性規定元素應該生成的框的類型。默認值：inline
我們常用的display屬性值有：
inlineblockinline-blocknone
把 display 設置成 none 不會保留元素本該顯示的空間，但是 visibility: hidden 還會保留。
那么，display:inline、display:block和display:inline-block有什么區別呢？
<style> .inline{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;} .block{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;} .inline-block{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;} </style> <body> <span class="inline"> inline </span>inline <span class="block"> block </span> block <span class="inline-block"> inline-block </span>inline-block </body> 查看結果:
inline特性
我們發現內聯對象inline給它設置屬性height和width是沒有用的，致使它變寬變大的
原因是
內部元素的寬高`+padding`。觀察inline對象的前后元素我們會發現`inline`不單獨占一行， 其它元素會緊跟其后。 block特性
而塊對象`block`是可以設置寬高的，但是它的實際寬高是本身寬高`+padding`。
觀察`block`的前后元素我們會發現`block`要單獨占一行。
然而，當我們即需要div有寬高，又不希望它獨占一行怎么辦？
inline-block特性
這個時候我們就需要使用inline-block了，再觀察一下上面的demo，我們會發現：
inline-block既具有block的寬高特性又具有inline的同行元素特性。 也就是說，當我們想要讓一個元素既不獨占一行，又可以設置其寬高屬性的時候，我們就可以選擇inline-block了。
然而，在IE6/7下padding對inline的寬高是對其沒影響的。
由此，我們可以聯想到行內元素和塊級元素
行內元素特點
1、和其他元素都在一行上； 2、元素的高度、寬度、行高及頂部和底部邊距不可設置； 3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。 塊級元素特點
1、每個塊級元素都從新的一行開始，並且其后的元素也另起一行。（真霸道，一個塊級元素獨占一行） 2、元素的高度、寬度、行高以及頂和底邊距都可設置。 3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。 在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的行內元素（inline）元素。
塊級元素是可以設置寬高的，但是它的實際寬高是本身寬高+padding。block元素要單獨占一行。內聯元素不單獨占一行，給他設置寬高是沒有用的。
在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素。設置display:block就是將元素顯示為塊級元素。如下代碼就是將行內元素a轉換為塊狀元素，從頁使用a元素具有塊狀元素特點。
a{display:block;} 那么，display的其他屬性值呢？
list-item 此元素會作為列表顯示。
run-in此元素會根據上下文作為塊級元素或內聯元素顯示。
compact CSS 中有值 compact，不過由於缺乏廣泛支持，已經從 CSS2.1 中刪除。
marker CSS 中有值 marker，不過由於缺乏廣泛支持，已經從 CSS2.1 中刪除。
table 此元素會作為塊級表格來顯示（類似table），表格前后帶有換行符。inline-table 此元素會作為內聯表格來顯示（類似table），表格前后沒有換行符。table-row-group 此元素會作為一個或多個行的分組來顯示（類似tbody）table-header-group 此元素會作為一個或多個行的分組來顯示（類似thead）table-footer-group： 此元素會作為一個或多個行的分組來顯示（類似tfoot）table-row 此元素會作為一個表格行顯示（類似 tr ）。table-column-group 此元素會作為一個或多個列的分組來顯示（類似 colgroup ）。table-column 此元素會作為一個單元格列顯示（類似 col ）table-cell 此元素會作為一個表格單元格顯示（類似 td 和 th）table-caption 此元素會作為一個表格標題顯示（類似 caption）
行內和塊級元素
