移动端web+flex布局

一、字体图标-iconfont

引入字体图标样式表iconfont.css

body写<i class="iconfont /*第一个类名固定的*/icon-favorites-fill/*第二个用什么图标用什么类名*/"></i>

网上没有图标的话，要svg图片，再上传到iconfont网站

二、平面转换-transform

1.位移：transform：transslate（水平移动距离，垂直移动距离）

.son{
    transition:all 0.5s;   /*位移时间*/ 
}                         /*padding会影响all，有padding时all改为写具体属性名*/
.father:hover .son{
    transform:translate(100px,50px);/*也可用百分比*/
}

2.旋转：rotate-----------------deg(角度)

transform:rotate(360deg);

3.转换原点origin

transform-origin:水平属性值 垂直属性值；                            
/*转换谁的中心点把选择器加到谁身上*/
/*属性值为方位名词 left center等       和px*/

ps：

1.transform具有层叠性，所以得写在一起

2.transform：translate（800px） rotate（360deg）；横向边走边滚

3.transform：rotate（360deg） translate（800px）；旋转中x轴改变，导致乱飞

4.缩放scale（中心点向四周缩放）/*左上角缩放用改变w和h也可*/

transform：scale（缩放倍数）；

opacity:透明

5.渐变

background-image：linear-gradient（
    transparent，
    rgba（0，0，0，.6）     /*透明渐变到.6的黑色*/   /*也可直接写多个颜色*/
）；

三、空间转换

1.位移

transform：transslate3d（x,y,z）;.需要搭配perspective使用，加给父级，取值像素值，建议800-1200实现透视效果（近大远小近实远虚）。

2.空间旋转：rotateZ/*和平面旋转一样*/ rotateX    rotateY   

3.立体呈现：transform-style：preserve-3d/*加给父级*/

四、动画-animation

页面产生多个动态效果时使用

1.定义动画

@keytframes 动画名称{                 /*两个动态效果使用*/
    from {}
    to {}
}

@keyframes 动画名称{                  /*多个使用*/
    0%{}
    10%{}
    15%{}
    100%{}    
}

2.使用动画

animation：动画名称  动画花费时长；

3.动画复合属性

animation：/*逗号隔开可以定义多组动画*/

动画名称：        

动画时长：        s 

速度曲线-timing-function： 

1. 补间动画：加速、减速、匀速linear、

2.逐帧动画：steps（3）/*分3段执行*/

延迟时间：        1s  /*1秒后执行*/

重复次数：        3   /*重复3次*/  、 infinite /*无限循环*/

动画方向：        alternate        /*反向*/

执行完毕状态： backwards/*最初状态*/ forwards /*最终状态*/  /*使用此得去掉infinite 和反向*/

importent：当有两个时间时，默认第一个为动画时长，第二个为延迟时间。

4.逐帧动画-精灵动画制作步骤

        1.准备显示区域

设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图

        2.定义动画

改变背景图的位置/*移动的距离就是精灵图的宽度*/

        3.使用动画

添加速度曲线steps（N），N与精灵图上小图个数相同

添加无限重复效果

五、移动web

视口标签<meta name="viewport" content="width=device-width, initial-scale=1.0">

实现网页宽度跟设备宽度一样。

750的图也叫二倍图，使用时用pxcook更改为设计图二倍。

1.百分比布局/*也叫流式布局  上古时代使用  */ 

效果：宽度自适应，高度固定。

2.flex布局/*也叫弹性布局*/

优势：浏览器提倡的布局模型，布局网页更简单，灵活，避免浮动脱标。

劣势：不兼容ie低版本。  caniuse.com 网站可以查兼容

作用：适合结构化布局

设置方式：亲爹添加display：flex开启。 

组成部分：弹性容器（父级）、弹性盒子（子级）、主轴（main axis）、交叉轴（cross axis）。

2.1主轴对齐方式：justify-content

2.2交叉轴对齐方式：align-items

2.3弹性盒子尺寸特点

盒子没给宽高，按内容走；给宽高，按宽高走；没给宽高，有stretch按拉伸走。

2.4弹性伸缩比

flex：整数；  /*占用父级盒子剩余尺寸的份数*/

 2.5准备工作

 3.flex修改主轴方向 flex-direction

4.弹性盒子换行+对齐方式+省略号

换行：flex-wrap

调整对齐方式：align-content ，取值与justify-content基本相同

父级{
    flex：1；
    width:0
}
子级{
    text-overflow：ellipsis；
    white-space：nowrap；
    overflow：hidden；
}

ps：弹性盒子里面的a加宽高生效