浮动、定位、flex布局
1.浮动
float: left / right; 左浮 / 右浮
1.1、浮动的目的：是为了让多个块级元素水平排列成一行展示，
注意：浮动的元素脱离了标准流，相当于这个元素浮起来了（可以理解为悬在半空中），不占有位置
一行展示多个元素也可以使用行内元素，但是元素与元素之间有空隙。
2.定位
注意：定位可以遵循“子绝父相”，就是说子盒子可以使用绝对定位，父盒子使用相对定位。
2.1、定位 = 定位模式 + 边偏移
2.1.1、position：static：默认值，没有开启定位(可不写)
relative：相对定位
absolute：绝对定位
fixed：固定定位（也是绝对定位的一种）
2.1.2、边偏移：top \ bottom \ left \ right
top：顶部偏移量，相对于定位的父元素的上边线的距离；
bottom：底部偏移量，相对于定位的父元素的下边线的距离；
left：左侧偏移量，相对于定位的父元素的左边线的距离；
right ：右侧偏移量，相对于定位的父元素的右边线的距离
2.2、position：relative 相对定位（自恋型）
相对定位：相对于自己原来的位置进行定位，不脱离标准流，仍然占有原来的位置
2.3、position：absolute 绝对定位
绝对定位：相对于有定位的父元素进行定位，脱离标准流，不占有原来的位置
2.4、position：fixed 固定定位
固定定位：相对浏览器的可视窗口进行定位，脱离标准流，不占有原来的位置
不随滚动条进行滚动，类似于小米官网最上方的导航栏一样，无论页面怎么滚动，导航栏一直固定在上方。
2.5、将定位的盒子进行居中
子盒子在父盒子内，水平垂直居中：利用边偏移+transform: translate(-50%,-50%);
2.6、注意:
3.flex布局
注意：设为Flex布局后,子元素的float、clear和vertical-align属性将失效
弹性盒子，用来处理弹性布局，可以简便、完整、响应式地实现各种页面、不同大小的屏幕、移动端
3.1、flex布局盒子的属性（五个属性）
1、flex-direction：决定主轴方向，默认主轴为X轴
row：默认值，主轴X轴，从左到右排列；
row-reverse：主轴X轴，从右到左排列；
column：主轴Y轴，从上往下排列；
column-reverse：主轴Y轴，从下往上排列；
2、flex-wrap：是否换行，当一行排列不下是，是否换行
nowrap：默认值，不换行；（挤一挤，一行展示完）
wrap：换行；第一行在上方，第二行在下方
wrap-reverse：换行；将展示不下的元素放在第一行上方
3、justify-content：在主轴上的对齐方式
flex-start：默认值，左对齐；
flex-end：右对齐；
center：居中对齐；
space-around：左右两侧距离相等，剩下空间，其他元素平分；
space-between：元素与元素之间距离相等
4、align-items：项目（子元素）垂直对齐方式
stretch：默认值，如果项目（子元素）未设置高度，将铺满整个盒子；
flex-end：交叉轴的终点对齐；
flex-statr：交叉轴的起点对齐；
center：交叉轴的中点对齐
baseline ：项目（子元素）第一行文字的基线对齐；
5、align-content：多根轴线的对齐方式，只有一根轴线的时候，该属性不生效
flex-start：与交叉轴的起点对齐；
flex-end：与交叉轴的终点对齐；
center：与交叉轴的中点对齐；
space-around：每根轴线中间间隔相等；
space-between：轴线两端相等，剩余面积轴线平分；
3.2、项目的属性（子元素的属性）
1、order：定义子元素的排列顺序，值越小元素越靠前；默认值为0
order：0（默认值，可以设置为任何值，也可以是负值，不能是小数）
2、flex-grow：控制项目（子元素）等比放大
flex-grow：0；默认值，不放大；
flex-grow：1；平均分摊后，放大显示；（不能是负值，负值不生效）
3、flex-shrink：空间不足时，项目（子元素）等比缩小；负值不生效
flex-shrink：1；默认值，空间不足时，项目等比缩小
flex-shrink：0；不缩小，写给谁，谁不缩小
4、align-self：单独控制某一个项目（子元素）的对齐方式，可以覆盖align-item
auto：默认值，相当于继承了align-item的属性；
stretch：如果父元素没有align-item，将铺满整个盒子；
flex-end：交叉轴的终点对齐；
flex-statr：交叉轴的起点对齐；
center：交叉轴的中点对齐
baseline ：项目（子元素）第一行文字的基线对齐；
5、flex-basis：在分配多余空间之前，项目占据的主轴空间；（如果主轴是X轴，相当于改变了width宽度；如果主轴是Y轴，相当于改变了height高度）
flex-basis：auto；默认值，项目（元素）原来的大小
flex-basis：XXpx；占据的空间大小，单位是像素
6、flex：是flex-grow，flex-shrink和flex-basis的简写，默认值为 0 1 auto，后两个属性可选。
flex: 0 1 auto；
建议优先使用这个属性，而不是单独写三个分离的属性