CSS display有哪些作用？下面本篇文章就来给大家介绍一下CSS display的作用。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
display属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。
display 的属性值有：
none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group| table-header-group|table-footer-group|table-row|table-column-group|table-column| table-cell|table-caption|inherit
其中常用的的有none、inline、block、inline-block。分别的意思是：
1、none： 元素不会显示，而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden， 是保留元素的空间的。
2、inline： display的默认属性。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的display 属性设为 inline， 设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding。
3、block： 将元素将显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width和height了。元素独占一行。
4、inline-block：行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height。
示例：
.inline{
display:inline;
width:100px;
height:100px;
padding:10px;
background-color:red;
}
.block{
display:block;
width:100px;
height:100px;
padding:10px;
background-color:green;
}
.inline-block{
display:inline-block;
width:100px;
height:100px;
padding:10px;
background-color:blue;
}
<div class="wrap">
<div class="inline">
inline
</div>inline
<div class="block">
block
</div> block
<div class="inline-block">
inline-block
</div>inline-block
</div>
这里提及下内联元素和块级元素的一些特点：
内联元素：
-
和其他元素都在一行上；
-
元素的高度、宽度及顶部和底部边距不可设置；
-
元素的宽度就是它包含的文字或图片的宽度，不可改变。
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
块级元素：
-
每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）；
-
元素的高度、宽度、行高以及顶和底边距都可设置。
-
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form
内联块状元素：
-
和其他元素都在一行上；
-
元素的高度、宽度、行高以及顶和底边距都可设置。
常用的内联块状元素有：
<img>、<input>
其他display的属性值不是很常用，其具体的含义如下：
-
list-item：此元素会作为列表显示。 -
run-in：此元素会根据上下文作为块级元素或内联元素显示。 -
table：此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 -
inline-table：此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 -
table-row-group：此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 -
table-header-group：此元素会作为一个或多个行的分组来显示（类似 <thead>）。 -
table-footer-group：此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 -
table-row：此元素会作为一个表格行显示（类似 <tr>）。 -
table-column-group：此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 -
table-column：此元素会作为一个单元格列显示（类似 <col>） -
table-cell：此元素会作为一个表格单元格显示（类似 <td> 和 <th>） -
table-caption：此元素会作为一个表格标题显示（类似 <caption>） -
inherit：规定应该从父元素继承 display 属性的值。
另外有两个已经废除的属性值：
-
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
-
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
