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)