1.最常用的布局方式 ---弹性布局 很重要 建议去看文档
对父元素设置弹性布局(设置后更名为容器)，子元素更名为项目
display:flex 开启弹性布局，默认所有项目在同一行显示(表示主轴默认在横向)
flex-direction 设置主轴方向(默认横向row)也可以修改为纵向(column)
justify-content 修改子元素在主轴的排列方式常用的值有flex-start（轴向开始方向对齐默认值）
flex(在结束方向对齐)
space-around 在主轴方向，项目和项目之间的距离相等，主轴两边的项目到容器边框的距离相等，且前者是后者的二倍
space-between 在主轴方向，项目和项目之间的距离相等，主轴两边的项目到容器边框的距离相等，且前者的距离等于后者
space-between，在主轴方向，项目于项目之间的距离相等，主轴两边的项目到容器边框的距离为0
center 在主轴中心处对齐
aligin-items：设置项目在交叉轴的对齐方式，
值有flex-start(默认值，交叉轴开始方向对齐)、center项目在教程轴中心处对齐、flex-end交叉轴结束方向对齐
flex-grow 设置容器去除项目的剩余空间分配(对项目使用)默认值为：0
flex-shrink 在项目内容大小超出父元素时，默认不会换行而是收缩项目大小，默认值为（1）,设置为0时表示元素不收缩，值越大收缩的越狠
flex-wrap 设置项目超出父元素内容后是否换行，默认不换行（nowrap）、换行(wrap)
order 设置项目的位置
2.网格布局 了解即可
display：grid 开启网格布局
gird-template-columns ：设置y轴有几块区域，块区域宽度多少
gird-template-rows： 设置x轴有几块区域，块区域宽度多少
3.定位
分为绝对定位、相对定位、粘性定位、固定定位、静态定位、
开启定位 position 值有absolute relative fixed
静态定位就是元素保持原有位置（即不定位）
绝对定位 相对于设置了定位的上级元素(静态定位不算)内边距为起点，脱离文档流
相对定位 相对于自身设置，不脱离文档流
固定定位 相对于浏览器进行设置，页面固定在浏览器的某个位置，脱离文档流
粘性定位 正常情况下表示相对定位，一旦滚动轴超出元素的位置，就会变为固定定位