第三周 less flex 手机适配

        7.26

        less设置变量

                @变量名：变量值（用于设置版心较多）

        绝对定位的水平垂直居中

                垂直：top 0; bottom 0; margin: auto 0

                水平：left 0; right 0; margin:0  auto 

                条件：自身宽高确定

        绝对定位元素的宽高百分比基于当前定位的祖先元素，祖先没有开启定位时基于根元素。

7.27

        flex布局（弹性布局）

                1.以容器单位，开启了flex布局的容器叫弹性盒子

                2.开启flex，容器内元素是默认水平排列

                3.flex容器中有主轴（默认是x轴）和y轴

                4.主轴方向长度默认丢失，y轴方向长度是默认100%；

                5.不脱离文档流

                6.felx容器中：块、行内块、行内元素都会变为不独占一行

                7.元素溢出默认压缩，不会换行

        设置在父容器的属性

                flex-direction 设置方向

                        row 行排列 默认值 从左到右排列        column 列排列 y轴 从上往下

                        row-reverse 从右到左排列        column-reverse 从下到上

                justify-content 设置对齐方式

                        flex-start 默认值 开始位置        flex-end 结束位置        centenr 居中

                        space-around 环绕对其，空白区域在元素左右平均分布，两端有间隙

                        space-between 环绕对其，空白区域在元素左右平均分布，两端没有间隙

                        space-evenly 空白区域在元素间隙平均分，包括左右端

                felx-wrap

                        nowrap 默认值，不换行，溢出挤压

                        wrap 换行，当元素有确定高度时，默认在父元素空白区域居中换行，没有高度则直接换。

                        wrap-reverse 往反（上）方向换行

                align-content:设置侧轴方向排列方式，把所有行当行

                        stretch 默认值 行拉伸以占据剩余空间。
                        center 朝着弹性容器的中央对行打包。
                        flex-start 朝着弹性容器的开头对行打包。
                        flex-end 朝着弹性容器的结尾对行打包。
                        space-between 行均匀分布在弹性容器中。
                        space-around 行均匀分布在弹性容器中，两端各占一半。

                align-items设置侧轴方向排列方式把每行当作一个整体对齐

                        center：位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

                        flex-start :位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

                        flex-end:位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

                        baseline： 位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

                设置在子容器的属性

                        flex：0-1 设置元素对于空白区域的占比，所有子元素都设置flex时平分

                        align-self: 单独设置元素侧轴方式的对齐方式

                        flex-grow： 默认是0，设置元素的扩张比原宽度+（空白区域宽/份数）*所占的份数

                        flex-shrink:设置元素的缩小比默认是1，0时表示不缩小

                        order:设置元素排列顺序，默认都是0，默认标签书写顺序排列值越大越后

        缺点

                1.占带宽         2.不兼容ie9以下（一般不考虑）

                3.flex容器中的子元素设置float：clear无效

7.28

        移动端适配

                单位：em、rem、%、px        vw vh：view with（视口宽度）view height 0~100vw 0~100 vh

                计算属性calc可以计算不同单位，逗号隔开

                        动态计算字体大小 （100vw*16）/390（视口）

                wiewport：视口，配置视口        width：视口宽度=bevice-width（设备宽度），不设置时，不同设备的默认值视口不一样

        设备宽度/视口宽度

                initial：缩放比，不配置视口，缩放比默认是设备宽度/视口宽度

                maximun-scale：设置最大缩放比 优先高于initial-scale

                minimun-scale：设置最小缩放比 优先高于initial-scale

                user-scale：yes/no 1/0设置允许用户缩放

        视觉视口

                不同设备的默认视口不一样，苹果系列一般都是980视口的缩放比：

                缩放比=设备宽度/视口宽度   390/980=0.4    100px===100*0.4

        媒体查询

                媒体：手机、平板、电脑屏幕、打印机

                作用：当屏幕宽度在某些范围，样式的变化

                写法：@media        媒体/all(所有媒体）

                关键字：and并且、not非、ohly（基本不用）

                媒体特性：with 宽度、min-width 最小、max-width最大   移动设备的屏幕适配区间

其他的css样式：

        变形：transform

                位移：2d x轴 y轴        3d x轴 y轴 z轴        translateX translateY translateZ

                旋转：旋转角度 角度单位（deg）        缩放：scale

        过渡：transition

                过渡样式        持续时间        速度曲线

        动画：animation

                1.设置关键帧  @keyfromes

                        关键帧：记录动画开始到结束中间各比样式

                        至少有：开始位置（form%）结束位置（to%）

                        中间阶段：百分比

                2.开启动画

                        aimation:关键帧名      持续时间     速度曲线        循环次数        是否反向