display

display 属性规定元素的盒类型。每个元素都有默认的 display 值，可以通过修改元素的盒类型来改变元素的部分属性与在页面中的布局方式。可取的值：

none

display:none 可将元素隐藏。元素将不被显示并且不占据任何空间（脱离文档流）。

block

display:bloack 可将元素作为块级元素显示。常见的块级元素包括：<div>、<p>、<h1>~<h6>、<ul>、<ol>以及html5新增：<header>、<main>、<article>、<section>、<aside>、<footer>等。

特征：

独占一行。
同级元素会上下依次排列。
可设置 width 、height 、margin 、padding 属性。
不设置宽度时，宽度为父元素宽度。

inline

display:inline 可将元素作为块级元素显示。常见的行内元素包括：<span>、<img>、<a>、<b>、<i>、<sub>(上标)、<sup>(下标)。

特征：

非独占一行。
同级元素会从左到右依次排列。
不可设置 width 、height 属性。
不可设置上下的 margin 、padding 属性。可设置左右的 margin 、padding 属性。
元素宽度为内容的宽度，元素高度为字体高度。

inline-block

display:inline-block 可将元素作为行内块元素显示。行内块元素整体上作为行内元素显示，内部作为块级元素显示。常见的行内块元素包括：<input>、<textarea>、<select>、<button>。

特征：

非独占一行。
同级元素会从左到右依次排列。
可设置 width 、height 、margin 、padding 属性。

list-item

display:list-item 可将元素作为列表显示。常见的元素：<li>。

特征：

独占一行。
可设置width和height属性。
不设置时宽度时，宽度为父元素宽度。
通常带有标记符号。

flex

display:flex 将元素作为弹性盒子显示。

run-in

display:run-in 将元素作为插入元素根据上下文显示为块级或者行内元素。

如果插入元素包含一个块级元素，那么插入元素作为块级元素显示。
如果插入元素的相邻元素为块级元素。那么插入元素作为行内元素显示。
其他情况下作为块级元素显示。

table与inline-table

table：元素作为块级表格显示，表格前后有换行符。
inline-table：元素作为内联表格显示，表格前后无换行符。

其他表格内盒类型

table-row-group：元素作为一个或多个行的分组来显示（类似）。
table-header-group：元素作为一个或多个行的分组来显示（类似）。
table-footer-group：元素作为一个或多个行的分组来显示（类似）。
table-row：元素作为一个表格行显示（类似）。
table-column-group：元素作为一个或多个列的分组来显示（类似）。
table-column：元素作为一个单元格列显示（类似）
table-cell ：元素作为一个表格单元格显示（类似和）
table-caption：元素作为一个表格标题显示（类似）