CSS中
display:block就是将元素显示为块级元素：
- 总是在新行上开始；
- 高度、行高以及顶和底边距都可控制；
- 宽度缺省是它的容器的100%，除非设定一个宽度；
- <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子；
display:inline就是将元素显示为行内元素：
- 其元素都在一行上；
- 行高及顶和底边距不可改变；
- 宽度就是它的文字或图片的宽度，不可改变；
- <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子；
display:inline-block将对象呈递为内联对象：
将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)
举例说明：
<ul>
<li>问答</li>
<li>头条</li>
<li>专栏</li>
<li>讲堂</li>
<li>发现</li>
</ul>这样一个列表在浏览器张显示的效果如下，li作为块级元素，默认是display:block，即每一个li都会换行：
可以我想让这个列表横向显示，这时候就需要采用display:inline，将li元素转换为行内元素：
<style>
ul li{
display: inline;
}
</style>
<ul>
<li>问答</li>
<li>头条</li>
<li>专栏</li>
<li>讲堂</li>
<li>发现</li>
</ul>此时浏览效果如下：
现在还不够好，元素之间的间隙太小，如果想给每一个li设置一个宽度，则需要设置为width:50px，问题来了，无论设置多宽，都不会生效，因为inline作为行内元素，没有width、height等属性，怎么办？这时候需要display:inline-block出现了，这个属性解决了宽度设置不了的问题，同时保持li元素依然是横向排列。
<style>
ul li{
display: inline-block;
width: 50px;
}
</style>
<ul>
<li>问答</li>
<li>头条</li>
<li>专栏</li>
<li>讲堂</li>
<li>发现</li>
</ul>浏览效果如下图所示：
总结起来就是：
- display：block 使元素称为块级元素
- display：inline 使元素称为行内元素
- display：inline-block 使元素保留行内元素布局，同时拥有块级元素的CSS属性(如width、height)
