none，关闭一个元素的显示，该元素如同不存在。
inline，该元素生成一个或多个行内元素盒。
block，该元素生成一个块元素盒。
list-item，该元素生成一个容纳内容和单独的列表行内元素盒的块状盒。
inline-block，该元素生成一个块状盒，该块状盒随着周围内容流动，如同它是一个单独的行内盒子（表现更像是一个被替换的元素）。
inline-table，在HTML中没有对应元素。它的行为就像一个HTML中的table元素，但是作为内联框，而不是块级框。 表格框内是一个块级上下文。
table，这个元素的作用就像  <table> 元素. 它定义了一个块级盒子。
table-caption，这个元素的作用的就像<caption> 一样。
table-header-group，这个元素的作用就像<tfoot> 一样。
table-footer-group，这个元素的作用就像<thead> 一样。
table-cell，这个元素的作用就像<td> 一样。
table-row，这个元素的作用就像<tr> 一样。
table-row-group，这个元素的作用就像<tbody> 一样。
table-column，这个元素的作用就像<col> 一样。
table-column-group，这个元素的作用就像<colgroup> 一样。
flex，该元素的行为类似于块级元素，并根据Flexbox模型来描述其内容。
inline-flex，该元素的行为类似于行内块级元素，并根据Flexbox模型来描述其内容。
grid，网格布局。
inline-grid，行内网格布局。

当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个非浮动块的垂直外边距会折叠。
另一方面，两个浮动元素的垂直外边距将不会折叠。当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。

visible，元素正常显示。
hidden，隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
collapse，用于表格行、列、列组和行组，隐藏表格的行或列，并且不占用任何空间。

当position设置为absolute或fixed时，top属性指定了定位元素上外边距边界与其包含块上边界之间的偏移。
当position设置为relative时，top属性指定了元素的上边界离开其正常位置的偏移。
当position设置为sticky时，如果元素在viewport里面，top属性的效果和position为relative等同；如果元素在viewport外面，top属性的效果和position为fixed等同。
当position设置为static时，top属性无效。

inline-table，在HTML中没有对应元素。它的行为就像一个HTML中的table元素，但是作为内联框，而不是块级框。 表格框内是一个块级上下文。
table，这个元素的作用就像  <table> 元素. 它定义了一个块级盒子。
table-caption，这个元素的作用的就像<caption> 一样。
table-header-group，这个元素的作用就像<tfoot> 一样。
table-footer-group，这个元素的作用就像<thead> 一样。
table-cell，这个元素的作用就像<td> 一样。
table-row，这个元素的作用就像<tr> 一样。
table-row-group，这个元素的作用就像<tbody> 一样。
table-column，这个元素的作用就像<col> 一样。
table-column-group，这个元素的作用就像<colgroup> 一样。

1. column-count，列数
2. column-width，列宽
3. column-gap，间隙

break-after，描述在生成的盒子之后的页面，列或区域中断行为（换句话说，如何以及是否中断）。
break-before，定义页面，列或区域在生成的盒子之前应如何处理中断。
break-inside，描述了在多列布局页面下的内容盒子如何中断，如果多列布局没有内容盒子，这个属性会被忽略。
column-fill
column-rule
column-rule-color，CSS 特性 column-rule-color 让你可以设置在多列布局中被画在两列之间的规则（线条）的颜色。
column-rule-style，CSS 特性 column-rule-color 让你可以设置在多列布局中被画在两列之间的规则（线条）的样式。
column-rule-width，CSS 特性 column-rule-color 让你可以设置在多列布局中被画在两列之间的规则（线条）的宽度。
column-span，设置为all的时候跨越所有列

display: grid;

显式网格：
    grid-template-columns
    grid-template-rows
隐式网格：
    grid-auto-rows
    grid-auto-columns
fr单位：等份
定义重复部分：repeat()
轨道大小：minmax()
布局算法：grid-auto-flow，[ row | column ] || dense

应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。
grid-column-start
grid-column-end
grid-row-start
grid-row-end

grid-template-areas
grid-area

grid-gap
grid-column-gap
grid-row-gap

嵌套网格和他的父级并没有关系。

z-index

容器：
grid
grid-area
grid-gap

显示网格：
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

隐式网格：
grid-auto
grid-auto-columns
grid-auto-rows

布局算法：
grid-auto-flow：控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。

定位：
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-row
grid-row-end
grid-row-gap
grid-row-start