display 页面布局，有值：

block 默认父元素宽度，可设置宽高，换行显示 有div p h1-h6 ul form等

inline 默认内容宽度，不可设置宽高，同行显示 有span a label cite em等

inline-block 默认内容宽度，可设置宽高，同行显示，整块换行 有input textarea select button等

none 设置元素不显示，不占高度（与visibility:hidden的区别，hidden占位）

布局：

水平居中：margin:0 auto; 意为垂直高度0，水平分布自动分布（平分）

需要注意的点：需要设置宽高的内容必须是block或inline-block，在需要进行布局的时候需要设置元素为inline-block

position 布局

设定位置方式，主要是对参照物的位置，有值设置位置

top 顶部

right 右边

bottom 下方

left 左边

z-index z轴，覆盖用，默认为0，可以有负值。但是有堆栈（先判定父元素）

static 默认，没有定位，忽略以上5个值的声明

relative 相对定位，仍在文档流中，相对于其正常位置

absolute 绝对定位，默认宽度为内容宽度，脱离文档流，相对于第一个父元素的位置

fixed 固定定位，默认宽度为内容宽度，脱离文档流，相对于浏览器窗口位置

tips：1、在定位元素没有设置宽高时，同时设置四个边距值，可将该元素拉开

2、可以用z轴设置遮罩做弹窗效果

float：浮动

left 向左浮动

right 向右浮动

none 默认值

inherit 继承

tips：浮动的元素默认宽度为内容宽度，向指定方向一直移动，脱离文档流，所有float的元素还在同一文档流。需要添加的clearfix内容解决兼容问题：

.clearfix:after{content:'.';display:block;clear: both;height: 0;overflow: hidden;visibility: hidden;}

.clearfix{zoom: 1;}

含义为：在clearfix这个需要浮动的元素的父元素后添加一个after的元素，内容为一个.来将这个父元素撑开，然后将这个点设置为隐藏。实现将浮动出的元素包含在原来的父元素中（使父元素保持高度）。如果还有IE低版本中，不支持:after功能，需要在以上代码增加一句.clearfix{zoom: 1;}以解决兼容性问题。

flex 弹性元素布局

要设置

display:flex;

将元素设置为弹性元素（在文档流中的子元素（孙元素不行）才会继承弹性元素）

有属性：

排列相关：

flex-direction 排列方向，有值：row，行，默认值，从左往右；row-reverse，反向行，从右往左；column，列，从上往下；column-reverse，反向列，从下往上；

flex-wrap 换行规则，有值：wrap，正向换行；wrap-reverse，反向换行；

flex-flow 是值缩写，建议使用，语法为flex-flow:<'flex-direction'>||<'flex-wrap'>

order 取值为数字，默认为0，是一个相对值，改变元素在主轴上的排序先后，有负值

弹性相关：

flex-grow 值为数值，默认为0，没有负数，意为分配空余空间给对应元素的比例（在空间有剩余的时候）

flex-shrink 值为数值，默认为0，没有负数，意为分配负空余空间给对应元素的比例（在空间没有剩余的时候）

flex-basis 设置初始宽高，语法为flex-basis:main-size|，要结合弹性来看

flex 值缩写，语法为flex:<'flex-grow'>||<"flex-shrink'>||<'flex-basis'>;默认值为initial: 0 1 main-size;

对齐相关：（在有剩余空间的时候）

justify-content 设置主轴方向上的对齐方式，有值flex-star向开始位置对齐；flex-end向结束位置对齐；center居中对齐；space-between平均分配；space-around包括首尾也平分；

align-items 设置辅轴方向上的对齐方式，有值flex-star向开始位置对齐；flex-end向结束位置对齐；center居中对齐；baseline基线对齐（指文字基线对齐）；stretch自适应充满辅轴方向；

align-self 设置单个元素在辅轴方向上的对齐方式，auto默认值；其余类似align-items

align-content 设置容器内有多行元素且有剩余空间时的辅助剩余空间分配方式，有值：flex-star向开始位置对齐；flex-end向结束位置对齐；center居中对齐；space-between平均分配；space-around包括首尾也平分；stretch自适应充满辅轴方向；

需要加空隙的时候加一个margin-方向:值;的属性即可添加一个外边距以增加空隙