Display属性block、inline、inline-block的联系与区别

时间:2018-07-10 14:41:14 类型:HTML/CSS
字号:    

首先来解释一下这三者分别是什么含义:
display:block  此元素将显示为块级元素,此元素前后会带有换行符。
display:inline  默认值,此元素会被显示为内联元素,元素前后没有换行符。
display:inline-block  行内块元素(CSS2.1 新增的值),意思就是说,让这个元素显示在同一行不换行,但是又可以控制高度和宽度,这相当于内敛元素的增强。
注意:IE6 不支持inline-block!


再来说一下内联元素和块级元素的定义:
内联元素(行内元素)是不可以控制宽和高、margin等;并且在同一行显示,不换行,比如span、font、em、b、a、img等元素。
块级元素时可以控制宽和高、margin等,并且会换行,比如div、p、ul、li、p和所有的h类标签。
在具体的操作中,通常需要灵活运用这三个属性,以达到对项目设计的需求。


以具体代码为例:
<p>元素是块级元素,通过display:inline就将段落元素设置为了内联元素
<html>
<head>
<style type="text/css">
p {display: inline}
</style>
</head>
<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>
</body>
</html>


<span>元素本来是内联元素,通过display:block就将<span>元素设置成了块级元素
<html>
<head>
<style type="text/css">
span
{
display: block
}
</style>
</head>
<body>
<span>本例中的样式表把 span 元素设置为块级元素。</span>
<span>两个 span 元素之间产生了一个换行行为。</span>
</body>
</html>

总结:
(1)块里可以含行,也就是div块里可以有span,但是内联元素内不能包含块元素。
(3)内联存在margin-left和margin-right,但没有margin-top和margin-bottom,也不具有width/height,而块元素具有高,宽,margin等等。
(5) 内联元素可以通过改变它的display属性来变成块,来具有块的属性;同样,块元素同样可以变成内联元素