做了很多項目，但是發現css中display屬性仍然沒有搞清楚是怎樣的，今天專門發一篇博文來總結以下。
首先講一下它們之間的共同點：都可以控制line-height
1.block:将目标元素變為塊級元素
block元素的特點有如下幾點：
a.每一進制素都獨占一行
b.height,line-height和maring都是可以設定
c.寬度預設則預設為100%
比較常見的block元素有：div,p,h,form,ul,li
firebug截圖div獨占一行：
2.inline:将目标元素變為行内元素
inline的元素的特點有如下幾點：
a.和其他元素都在一行上
b.height,line-height和margin設定沒有效果
c.它的寬度依照它的内容（文字或者是圖檔）,不可改變
比較常見的inline元素有：span,a,label,input,img
firebug截圖span示例：
代碼：
<span style="width: 100px;height: 100px;margin-top: 10px;">我是inline元素</span>
<span>我是inline元素</span>
<span>我是inline元素</span>
<span>我是inline元素</span>
3.inline-block:行内塊元素
inline-block元素特點有如下幾點：
a.以行内元素顯示
行内塊元素的解釋：
以圖例來表述行内元素和塊級元素的差別會更加直覺：
①行内元素會再一條直線上，是在同一水準線布局的。
.green ,.yellow{display:block;}
.green{background:green;}
.yellow{background:yellow;}
②塊級元素各占一行，是垂直方向布局的。
<div class="green"></div><div class="yellow"></div>
綜上所述：如果你要将行内元素變成塊級元素，那麼就隻需要在該标簽上加上樣式 display:block; 這裡已經牽涉到了CSS内容。塊級元素可以用樣式控制其高、寬的值。
行内元素不可以控制寬和高，除非你想将它轉變成為塊級元素或是行内塊級元素inline-block否則它的寬和高，是随标簽裡的内容而變化。