CSS中display:inline、block、inline-block的区别

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)