一、Display:flex “弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局
        1. 父项常见属性6
                • flex-direction  决定主轴的方向  flex-direction: row | row-reverse | column | column-reverse;
                • flex-wrap       定义换行情况    flex-wrap: nowrap | wrap | wrap-reverse;
                • flex-flow        flex-direction和flex-wrap的简写，默认row nowrap
                • justify-content定义项目在主轴上的对齐方式    justify-content: flex-start | flex-end | center | space-between | space-around 左/右对齐/居中/两端对齐/两侧间隔相等
                • align-item      定义在交叉轴上的对齐方式    align-items: flex-start | flex-end | center | baseline | stretch 起点对齐/终点对齐/中点对齐/拉伸(默认值)
                • align-content  定义多根轴线的对齐方式    如果项目只有一根轴线，该属性不起作用
                • 单行找align-items 多行找 align-content
        2. 子项常见属性
                a. Flex : 子项目占的份数
                b. align-self : 控制子项自己在侧轴的排列方式,
                align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
                默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
                c. Order : 属性定义子项的排列顺序（前后顺序）
二、 rem+less布局
        1. em是相对于父元素字体大小,rem的基准是相对于html元素的字体大小
        2. 媒体查询（Media Query）是CSS3新语法,当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
        3. Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器,引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本
        4. rem适配方案:
                a. less+rem+媒体查询
                b. flexible.js+rem
                c. 两种方案现在都存在。方案2 更简单，现阶段大家无需了解里面的js代码。
                rem实际开发适配方案1
                ①假设设计稿是750px
                ②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
                ③每一份作为html字体大小，这里就是50px
                ④那么在320px设备的时候，字体大小为320/15就是 21.33px
                ⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
                ⑥比如我们以750为标准设计稿
                ⑦一个100100像素的页面元素在 750屏幕下， 就是 100/ 50 转换为rem 是 2rem2rem 比例是1比1
                ⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1
                ⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
                总结：
                ①最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
                ②屏幕宽度/划分的份数就是 htmlfont-size 的大小
                ③或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小
                rem 适配方案2
                手机淘宝团队出的简洁高效 移动端适配库
                我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
                它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
                我们要做的，就是确定好我们当前设备的html 文字大小就可以了
                比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以
                里面页面元素rem值： 页面元素的px 值 / 75
                剩余的，让flexible.js来去算
                github地址：https://github.com/amfe/lib-flexible
                总结：
                因为flexible是默认将屏幕分为10等分
                但是当屏幕大于750的时候希望不要再去重置html字体了
                所以要自己通过媒体查询设置一下
                并且要把权重提到最高
                VSCode px 转换rem 插件 cssrem
                因为cssrem中css自动转化为rem是参照默认插件的16转换的所以需要自己配置
               
               
               

三、流式布局(百分比布局)
四、响应式布局
五、box-sizing: border-box
        1. 默认值: content-box: 设置元素宽度100px,元素内容为100px,边框以及内边距的宽度都会被增加到最后绘制出来的元素宽度中
        2. Border-box: 边框和内边距的值是包含在width内的,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

一、Display:flex “弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局
        1. 父项常见属性6
                • flex-direction  决定主轴的方向  flex-direction: row | row-reverse | column | column-reverse;
                • flex-wrap       定义换行情况    flex-wrap: nowrap | wrap | wrap-reverse;
                • flex-flow        flex-direction和flex-wrap的简写，默认row nowrap
                • justify-content定义项目在主轴上的对齐方式    justify-content: flex-start | flex-end | center | space-between | space-around 左/右对齐/居中/两端对齐/两侧间隔相等
                • align-item      定义在交叉轴上的对齐方式    align-items: flex-start | flex-end | center | baseline | stretch 起点对齐/终点对齐/中点对齐/拉伸(默认值)
                • align-content  定义多根轴线的对齐方式    如果项目只有一根轴线，该属性不起作用
                • 单行找align-items 多行找 align-content
        2. 子项常见属性
                a. Flex : 子项目占的份数
                b. align-self : 控制子项自己在侧轴的排列方式,
                align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
                默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
                c. Order : 属性定义子项的排列顺序（前后顺序）
二、 rem+less布局
        1. em是相对于父元素字体大小,rem的基准是相对于html元素的字体大小
        2. 媒体查询（Media Query）是CSS3新语法,当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
        3. Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器,引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本
        4. rem适配方案:
                a. less+rem+媒体查询
                b. flexible.js+rem
                c. 两种方案现在都存在。方案2 更简单，现阶段大家无需了解里面的js代码。
                rem实际开发适配方案1
                ①假设设计稿是750px
                ②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
                ③每一份作为html字体大小，这里就是50px
                ④那么在320px设备的时候，字体大小为320/15就是 21.33px
                ⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
                ⑥比如我们以750为标准设计稿
                ⑦一个100100像素的页面元素在 750屏幕下， 就是 100/ 50 转换为rem 是 2rem2rem 比例是1比1
                ⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1
                ⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
                总结：
                ①最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
                ②屏幕宽度/划分的份数就是 htmlfont-size 的大小
                ③或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小
                rem 适配方案2
                手机淘宝团队出的简洁高效 移动端适配库
                我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
                它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
                我们要做的，就是确定好我们当前设备的html 文字大小就可以了
                比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以
                里面页面元素rem值： 页面元素的px 值 / 75
                剩余的，让flexible.js来去算
                github地址：https://github.com/amfe/lib-flexible
                总结：
                因为flexible是默认将屏幕分为10等分
                但是当屏幕大于750的时候希望不要再去重置html字体了
                所以要自己通过媒体查询设置一下
                并且要把权重提到最高
                VSCode px 转换rem 插件 cssrem
                因为cssrem中css自动转化为rem是参照默认插件的16转换的所以需要自己配置
               
               
               

三、流式布局(百分比布局)
四、响应式布局
五、box-sizing: border-box
        1. 默认值: content-box: 设置元素宽度100px,元素内容为100px,边框以及内边距的宽度都会被增加到最后绘制出来的元素宽度中
        2. Border-box: 边框和内边距的值是包含在width内的,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。