做了很多项目，但是发现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否则它的宽和高，是随标签里的内容而变化。