弹性盒：

控制子元素在父元素中的排列方式 以下都是设置在父元素里的

1. display：flex；默认X轴是主轴
2. align-item前提要有宽高，侧轴的对齐方式
3. flex-direction改变主轴的方向
4. flex-start 默认值 起点开始依次排列
5. flex-end 终点开始依次排列
6. center 沿主轴居中排列
7. space-around 沿主轴均匀排列，空白间隔分布在弹性盒子两侧
8. space-between 沿主轴均匀排列，空白间隔分布在相邻盒子之间
9. space-evenly 沿主轴均匀排列，弹性盒和容器之间的间距相等
10. justify-content: center;
11. align-items 侧轴的对齐方式
12. flex-start 默认值 起点开始依次排列
13. flex-end 终点开始依次排列
14. center 沿侧轴居中排列
15. stretch 弹性盒子沿着侧轴被拉伸至铺满容器
16. column 主轴是y轴
17. column-reverse
18. row 默认值 主轴是x轴
19. row-reverse
20. flex-direction: row
21. flex-wrap 是否换行
22. nowrap 默认值 不换行
23. wrap 换行
24. wrap-reverse
25. flex-wrap: wrap-reverse;

占比

flex: 1; /占用父盒子的剩余尺寸/

移动适配

rem vw/vh

媒体查询

@media  媒体类型  and|not|only (媒体特性){
    //css代码
}

媒体类型：

• all 用于所有设备
• print 用于打印机和打印预览
• screen 电脑屏幕 平板电脑 智能手机

  @media screen and (min-width: 320px) {
        html {
        /*根字号*/
          font-size: 32px;
        }
      }
      @media screen and (min-width: 375px) {
        html {
          font-size: 37.5px;
        }
      }
      @media screen and (min-width: 414px) {
        html {
          font-size: 41.4px;
        }
      }

1:根据视口宽度，设置不同的HTML标签字号
2：书写代码，尺寸是rem单位
  2.1：确定设计稿对应的设备的HTML标签字号
  2.2 查看设计稿宽度--确定参考设备宽度(视口宽度)--确定根字号（1/10视口宽度）
3.量取的设计稿的宽度87px*87px
4.计算rem单位的尺寸
  N*37.5=87/2    N=87/2/37.5
  rem单位的尺寸=px单位的值/2/根字号