display
规定元素应该生成的框的类型(默认值:inline)
position
规定元素的定位类型(默认值:static)
普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式。
相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现会改变。
相对定位可以看作特殊的普通流定位，元素位置是相对于他在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样。
绝对定位(absolute)的元素的位置是相对于距离他最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块儿（body或html神马的）元素。
因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。
注意position:fixed也是绝对定位！
position ---sticky(CSS3)
“粘性的”，基本上，可以看成是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。
sticky元素效果完全受制于父级元素们，这和position:fixed定位有着根本性的不同，fixed元素直抵页面根元素，其他父元素对其left/top定位无法限制。
float
浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。
浮动会让元素脱离文档流,不影响不浮动元素.实际上并不完全如此,如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间.用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。【解决：想阻止行框围绕在浮动元素外边，可以使用clear属性，属性的left，right，both，none表示框的哪些边不挨着浮动框】
flex
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。
容器上的属性：
- flex-direction: 决定主轴的方向(即项目的排列方向)
row(默认):主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿 - flex-wrap: 决定容器内项目是否可换行
nowrap(默认): 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行
wrap：项目主轴总尺寸超出容器时换行，第一行在上方
wrap-reverse：换行，第一行在下方 - flex-flow: flex-direction 和 flex-wrap 的简写形式
默认值 flex-flow: row nowrap - justify-content：定义了项目在主轴的对齐方式
建立在主轴为水平方向时测试，即 flex-direction: row flex-start(默认): 左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙
space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍 - align-items: 定义了项目在交叉轴上的对齐方式
建立在主轴为水平方向时测试，即 flex-direction: row
stretch(默认): 如果项目未设置高度或者设为 auto，将占满整个容器的高度
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐 - align-content: 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用
flex-wrap 设置为 nowrap 的时候，容器仅存在一根轴线，因为项目不会换行，就不会产生多条轴线；flex-wrap 设置为 wrap 的时候，容器可能会出现多条轴线，这时候你就需要去设置多条轴线之间的对齐方式了
align-content: flex-start | flex-end | center | space-between | space-around | stretch(默认);
flex item上的属性：
- order: 定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0
- flex-basis:定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间
auto(默认)：即项目本来的大小, 这时候 item 的宽高取决于 width 或 height 的值
当主轴为水平方向的时候，当设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。 - flex-grow:定义项目的放大比例
默认值为 0，即如果存在剩余空间，也不放大 - flex-shrink:定义了项目的缩小比例 默认值: 1，即如果空间不足，该项目将缩小，负值对该属性无效
- flex: flex-grow, flex-shrink 和 flex-basis的简写
默认值：0 1 auto
快捷值：auto (1 1 auto) 和 none (0 0 auto) - align-self: 允许单个项目有与其他项目不一样的对齐方式
跟 align-items 属性时一样的，只不过 align-self 是对单个项目生效的，而 align-items 则是对容器下的所有项目生效的。
vertical-align和line-height
参考：
CSS布局 ——从display，position， float属性谈起
杀了个回马枪，还是说说position:sticky吧
30 分钟学会 Flex 布局
Flex 布局教程：语法篇
Flex 布局教程：实例篇
CSS深入理解vertical-align和line-height的基友关系
深入理解CSS：line-height、vertical-align
