position：

relative：对象遵循常规流，并且参照自身在常规流中的位置通过投票，bottom，right，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。

absolute：对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
可以和其他语言的abs()函数理解起来，取绝对值定位 绝对定位参考上一个已经定位的元素 如果上一个父类元素没有定位，要设置父元素的position为relative或者参考窗口定位

fixed：与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
类似做顶部悬停效果

display

inline 指定对象为内联元素
block 指定对象为块元素
inline-block 指定对象为内联块元素。（CSS2）
box 将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox 将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox 将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
*flex 将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex
将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
后续用最新的版本 flex inline-flex

margin

为元素设置所有四个方向（上右下左）的外边距

padding

为元素设置所有四个方向（上右下左）的内边距

关于flex

flex-grow 设置或检索弹性盒的扩展比率。
flex-shrink 设置或检索弹性盒的收缩比率
flex-basis 设置或检索弹性盒伸缩基准值。
flex-flow 复合属性。设置或检索伸缩盒对象的子元素排列方式。

图片.png

flex-direction 设置或检索伸缩盒对象的子元素在父容器中的位置。

图片.png
图片.png

flexx-wrap 设置或检索伸缩盒对象的子元素超出父容器时是否换行。可以做九宫格

图片.png

align-content 设置或检索弹性盒堆叠伸缩行的对齐方式。

图片.png
图片.png

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

图片.png

align-self 设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式。
justify-content 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

图片.png

order 设置或检索伸缩盒对象的子元素出現的順序。