CSS display属性的作用

作者:WangMin

格言:努力做好自己喜欢的每一件事

网页上的每个元素都是一个矩形框。CSS中的display属性决定了矩形框的行为。display属性是我们在前端开发中常常使用的一个属性。

display的属性值如下：

属性值	含义
block	块对象的默认值。用该值为对象之后添加新行
none	隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline	内联对象的默认值。用该值将从对象中删除行
inline-block	行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height。
inherit	规定应该从父元素继承 display 属性的值。
compact	分配对象为块对象或基于内容之上的内联对象（已废除）
marker	指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用（已废除）
inline-table	将表格显示为无前后换行的内联对象或内联容器
list-item	将块对象指定为列表项目。并可以添加可选项目标志
run-in	分配对象为块对象或基于内容之上的内联对象
table	将对象作为块元素级的表格显示
table-caption	将对象作为表格标题显示
table-cell	将对象作为表格单元格显示
table-column	将对象作为表格列显示
table-column-group	将对象作为表格列组显示
table-header-group	将对象作为表格标题组显示
table-footer-group	将对象作为表格脚注组显示
table-row	将对象作为表格行显示
table-row-group	将对象作为表格行组显示

其中常用的如上表黄色着重部分：block、none、inline、inline-block，下面我们就开始讲一下这几个常见的属性吧！

display:block

block： 将元素将显示为块级元素，元素前后会带有换行符，通常用于将行内元素转换为块级元素时使用。那么什么是块级元素呢？什么是行内元素呢？

块级元素：

• 总是以一个块的形式表现出来，占领一整行。若干同级块元素会从上之下依次排列（使用float属性除外）。
• 可以设置高度、宽度、各个方向外补丁（margin）以及各个方向的内补丁（padding）。
• 当元素宽度（width）没有设置时，它的宽度时其容器的100%，除非我们给它设定了固定的宽度。
• 块级元素中可以嵌套其他块级元素或行内元素。
• 块级元素的display属性值默认为block。

行内元素

• 它不会单独占据一整行，而是只占领自身的宽度和高度所在的空间，也就是元素的的宽高度是由它的文本内容撑开。若干同级行内元素会从左到右（即某个行内元素可以和其他行内元素共处一行），从上到下依次排列。
• 行内元素不可以设置高度、宽度，其高度一般由其字体的大小来决定，其宽度由内容的长度控制。
• 行内元素只能设置左右的margin值和左右的padding值，而不能设置上下的margin值和上下的padding值。因此我们可以通过设置左右的padding值来改变行内元素的宽度。
• 行内元素一般不可以包含块级元素。
• 块级元素的display属性值默认为inline。

通过给一个行内元素设置为block后，元素可以设置width和height了。元素独占一行。这里我用行内元素 span来说明一下， 例子如下：

<span></span>

span{
	width:200px;
	height:200px;
	display: block;
	background:#f00;
}

没有给span设置display:block，span的宽高度由元素内容撑开，及时span设置了宽高度，如下：



给span设置display:block，span由行内元素转换为块级元素，span设置的宽高度就起作用了，如下：



除了上面对display:block的理解，它还有一个含义，表示显示元素。实际含义由项目需求而定。

除了给行内元素设置display:block使它转换为块级元素的方式以外，以下还有两种方式可以使行内元素转换为块级元素，如下：

第一种：给元素设置 float 属性

span{
	width:200px;
	height:200px;
	float:left;
	border:1px solid #ccc;
}

第二种：给行内元素设置position:absolute/fixed，效果跟第一种方法是一样的

display:none

display:none这个值表示元素不被显示。当你想要某个元素隐藏时，就可以给某个元素设置这个属性，它就会消失在网页中，但元素并没有在文档中删除，只是隐藏在网页结构中，不在网页中显示而已。但如果你想要元素显示的话，可以给元素设置display:block，元素就可以显示在网页中了。

display:inline

display:inline 的作用可以将一个块级元素转换成行内元素，那么这个块级元素将不能再设置宽和高以及上下方向的margin和padding。这个块级元素实际的宽度和高度都是auto，并不是我们设定的值。如下：

<div>块级元素div</div>

div{
	width:200px;
	height:200px;
	display:inline;
	background:#f00;
}

从上面的例子可以看到，div本身是块级元素，因为设置了display:inline，它就有块级元素变为了行内元素，给div设置的宽高度就失效了，而它的宽高度就有它的文本内容撑开了。

display：inline-block

根据名字来看，我们可以得到它是结合了inline和block并保留了它们的特性。所以设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性，又保持了inline元素不换行的特性。

举例说明，我们在做横向导航菜单的时候，一般是用ul li a组合，ul li默认是竖向显示的，然后将li设置为float，这样就可以得到横向的导航标签了。而现在我们可以通过li和display:inline-block;来实现。

默认效果：

<div>
	<ul>
		<li><a href="">首页</a></li>
		<li><a href="">商品</a></li>
		<li><a href="">关于我们</a></li>
		<li><a href="">招聘</a></li>
	</ul>
</div>

div>ul>li{
		width:100px;
		background:#f00;
		line-height: 30px;
		text-align: center;
		margin-bottom: 10px;
		list-style: none;
}

设置了display:inline-block的效果:

div>ul>li{
		width:100px;
		background:#f00;
		line-height: 30px;
		text-align: center;
		display: inline-block;
		list-style: none;
}

从两个图可以看出，设置了display：inline-block后 li 能够在同一行显示，display：inline-block的效果几乎和浮动一样，但是它们其实还是区别。接下来就来讲一下inline-block和浮动 float 的比较。

1）不同之处：对元素设置display：inline-block ，元素不会脱离普通文档流，而float就会使得元素脱离普通文档流，且还有父元素高度坍塌（对于未知高度的元素）的效果，所以要清除浮动。普通文档流参照 CSS属性 Position的几种定位方式 对文档流的解释。

2）相同之处：能在某种程度上达到一样的效果。就以上的例子来说：

float浮动的效果：



就这么一看两个几乎是一样的效果，但仔细看看设置display：inline-block，li之间有间隙问题，而float浮动使 li 紧挨着。

3）浮动布局不太好的地方：参差不齐的现象，也就是元素高度不一样时，我们可以看到一个效果：

<div class="box">
	<div class="one">one</div>
	<div class="two">two</div>
	<div class="three">three</div>
	<div class="four">four</div>
</div>

.box{
	width:300px;
	border:1px solid #ccc;
	overflow: hidden;
}
.box>div{
	width:100px;
	float: left;
}
.box>.one{
	height:100px;
	background:#8A2BE2;
			}
.box>.two{
	height:150px;
	background:#98FB98;
}
.box>.three{
	height:100px;
	background:#CCCCCC;
}
.box>.four{
	height:150px;
	background:#CD853F;
}

设置float的效果，div排列得参差不齐：



设置display: inline-block;的效果，每一个div都很有序的排列：



从上面可以看出浮动的局限性在于，如果要元素排满一行，换行后还要整齐排列，就要子元素的高度一致才行，不然就会出现子元素排列得参差不齐，而inline-block就不会。

display：inline-block存在的间隙问题：

1）用了display:inline-block后，存在间隙问题，间隙为4像素，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手敲个回车，而这个回车会产生回车符，回车符相当于空白符。间隙产生的原因就是我们没怎么注意的空白符。

2）去除空隙的方法：对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙。但是它会影响元素内部文本的显示。



3）浏览器兼容性：ie6/7是不兼容 display：inline-block的，所以用以下代码处理以下：

　　对于行内元素直接使用：{dislplay:inline-block;}

　　对于块级元素：需添加 {display:inline;zoom:1;}

总结

　display：inline-block的布局方式和浮动的布局方式，究竟使用哪个，我觉得应该根据实际情况来决定的：

　　a. 对于横向排列东西来说，我建议使用inline-block来布局，因为这样清晰，也不用再像浮动那样清除浮动，害怕布局混乱等等。

　　b. 对于浮动布局就用于需要文字环绕的时候。

　　

---

以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! 后续继续更新!!