display 基础用法详解

定义和用法：display 属性设置元素如何显示。 

display： none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex

默认值：inline

none	隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline	指定对象为内联元素。
block	指定对象为块元素
list-item	指定对象为列表项目。
inline-block	指定对象为内联块元素。
table	指定对象作为块元素级的表格。类同于html标签<table>
inline-table	指定对象作为内联元素级的表格。类同于html标签<table>
table-caption	指定对象作为表格标题。类同于html标签<caption>
table-cell	指定对象作为表格单元格。类同于html标签<td>
table-row	指定对象作为表格行。类同于html标签<tr>
table-row-group	指定对象作为表格行组。类同于html标签<tbody>
table-column	指定对象作为表格列。类同于html标签<col>
table-column-group	指定对象作为表格列组显示。类同于html标签<colgroup>
table-header-group	指定对象作为表格标题组。类同于html标签<thead>
table-footer-group	指定对象作为表格脚注组。类同于html标签<tfoot>
run-in	根据上下文决定对象是内联对象还是块级对象。
box	将对象作为弹性伸缩盒显示。（伸缩盒最老版本）
inline-box	将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）
flexbox	将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）
inline-flexbox	将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）
flex	将对象作为弹性伸缩盒显示。（伸缩盒最新版本）
inline-flex	将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）

其中常用的的有none、inline、block、inline-block。

• none： 元素不会显示，而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden， 是保留元素的空间的。

• inline： display的默认属性。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的display 属性设为 inline， 设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding。

• block： 将元素将显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width和height了。元素独占一行。

• inline-block：行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height