flex弹性布局1.flex布局体验

    div {        display: flex;        width: 80%;        height: 300px;        justify-content: space-around;    }        div span {        /* width: 150px; */        height: 100px;        margin-right: 5px;        flex: 1;    }    复制代码

2.flex布局原理

flex是flexible Box的缩写

flex容器（flex container）中的子盒子就是 flex项目（flex item）

父盒子设为flex布局，子元素的float，clear，vertical-align属性失效！

原理： 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

3.flex布局父项常见属性flex-direction：设置主轴的方向 flex-direction：row; /*主轴默认的x轴是水平向右row*/ flex-direction：column; /*侧轴默认的y轴是水平向下column*/ 复制代码justify-content：设置主轴上的子元素排列方式（特别注意是在主轴上） justify-content：flex-start(默认贴着左边)/end(贴着右边)/center(在主轴居中对齐) /space-around(平分剩余空间)/space-between(先两边贴边，再平分剩余空间) 复制代码flex-wrap：设置子元素是否换行 flex布局中，默认的子元素是不换行的 //wrap换行 flex-wrap: wrap; 复制代码align-content：设置侧轴上的子元素排列方式（多行）---在单行下是没效果的 align-content：flex-start(从上到下)/end(从下到上)/center(垂直居中)/stretch(拉伸 默认值) /space-between(先两边贴边，再平分剩余空间)/space-around(平分剩余空间) 复制代码align-items：设置侧轴上的子元素排列方式（单行） align-items: flex-start(从上到下)/end(从下到上)/center(垂直居中)/stretch(拉伸 默认值) 复制代码flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap flex-flow: column wrap； 复制代码4.flex布局子项常见属性flex子项目的份数 (1.剩余空间2.份数) flex: <number>;/*default 0*/ 复制代码align-self控制子项自己在侧轴的排列方式(了解，但面试会问到) 父级flex是统一调整子元素位置，align-self可控制某一子元素的位置 align-self: flex-end; 复制代码order属性定义子项的排列顺序（前后顺序） 默认的是0，数值越小越靠前 与z-index不一样 /* 默认是0 -1比0小所以在前面 */ order: -1; 复制代码rem适配布局1.rem基础

rem单位（root em）是一个相对单位，类似em em是父元素字体的，不同的是rem的基准是相对于html元素的字体大小

比如，根元素（html）设置font-size=12px；非根元素设置width：2rem；则换成px表示就是24px

两者比较：

em相对于父元素 的字体大小来说的rem相对于html 元素的字体大小来说的rem的优点 可以通过修改html里面的文字大小 来改变页面中元素的大小 可以整体控制2.媒体查询（Media Query）

@media可以针对不同的屏幕尺寸设置不同的样式

语法规范：

@media mediatype and|not|only(media feature){CSS-Code;}复制代码

mediatype查询类型-----将不同的终端划分成不同的类型，称为媒体类型 all 用于所有的设备 / print 用于打印机和打印预览 / screen 用于电脑屏幕，平板电脑，智能手机等关键字：and 将多个媒体类型连在一起 /not 排除某个媒体类型 /only 指定某个特定的媒体类型，可以省略媒体特性：小括号包含（width/min-width/max-width） 媒体查询可以根据不同的屏幕尺寸再改变不同的样式， 从小到大更简洁----层叠性

注意点：screen 和 and不可省略 数字后面必须跟单位 封号得去掉

3.媒体查询+rem实现元素动态大小变化

  * {        margin: 0;        padding: 0;    }    /* 从小到大的顺序 */      @media screen and (min-width: 320px) {        html {            font-size: 50px;        }    }        @media screen and (min-width: 640px) {        html {            font-size: 100px;        }    }        div {        height: 1rem;        font-size: .5rem;        background-color: green;        color: #fff;        text-align: center;        line-height: 1rem;    }复制代码

4.引入资源（理解）

引入资源就是 针对于不同的屏幕尺寸 调用不同的css文件

 <style>    /* <!-- 当我们屏幕大于等于 640px以上的 ，我们让div一行显示两个 --> */    /* 当我们屏幕小于640px 的时候 我们让div一行显示一个 */    /* 建议： 我们媒体查询最好的方法是从小到大 */  </style> <link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)"> <link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">复制代码

5.less基础

1.Less介绍

Less是css的扩展语言，也是css的预处理器。Less是一门CSS预处理语言，它扩展了CSS的动态特性

2.维护css的弊端，css的选择器很是头疼，有些标签要反复写，效率低且易出错，现在用less写，只需要按照html的DOM树方式写一遍，然后在里面加样式就行了

例如：

.nav{     .container{                 ul{                    li{                        ...                        a{                            ...                            &:hover{				...                               }                        }                  }              }        }  }复制代码

3.Less编译

正确的变量名 @color: green;错误的变量名 @1color @color~#变量名区分大小写 @color 和 @COLOR 是两个不同的变量

4.less运算 + - * /

注意点：

运算符中间左右有个空格隔开1px + 5两个数参与运算，如果只有一个数有单位 ，则结果以这个单位为准两个数参与运算，如果两个数都有单位，而且有不同的单位，最后的结果以第一个单位为准rem适配方案

1.rem实际开发适配方案

①按照设计稿与设备宽度的比例，动态计算并且设置html跟标签的font-size的大小（媒体查询）②CSS中，设计稿元素的宽，高，相对位置等取值，按照同等比例换算为rem单位的值

2.rem实际开发适配方案1（基本以750px为准） 划分15等份/20

元素大小的取值方法：

①最后的公式：页面元素的rem值=页面元素值（px） / (屏幕宽度/划分的份数)②屏幕宽度/划分的份数就是html中font-size的大小③或者：页面元素的rem值= 页面元素值（px） / html中font-size的字体大小

3.rem实际开发适配方案2 （flexable.js的引用） -- 推荐

官网下载js文件，默认将屏幕划分为十等份，引入之后仅需设置html的font-size即可，剩下的由flexable.js计算。