移动Web
一.字体图标
1.inconfont;
本地引入：下载本地，引入inconfont.css文件，类名：inconfont icon-xxx; unicode:iconfont内容之中填写unicode编码
在线引入：点开在线链接，把代码复制到link里面的href，复制的css代码之前要加http:
2.fontawesome
二.平面、空间转换
1.位移：transform:translate（10px，10px），transform:translate3d(x,y,z);可以用百分比
2.旋转：transform:rotate(360deg),transform:rotate3d(x,y,z,deg)顺时针表示正值
3.缩放：transform:scale(2);括号里面写倍数，可以百分比
4.透视、视距:perspective:400~1200 px
5.3D呈现：transform-style:preserve-3d
注意：1.在平移和旋转同时进行的时候，先写平移，否则是曲线平移
2.缩放和旋转没有顺序
3.左手定则
三.背景渐变
background-image:linear-gradient(方位：to right；角度，颜色1，颜色2，...)
四.动画
步骤：1.定义动画
@keyframes 动画名称 {
form{ } 或0%{ } // 初始状态，如果和盒子状态相同可省略
to{ } 或 100%{ } // 结束状态
}
2.调用动画
animation:动画名称 动画持续时间 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
速度曲线：linear 匀速 补间动画
速度曲线：steps(数值) 逐帧动画
重复次数：infinite 无限播放
动画方向：alternate 交替播放
执行完毕时状态：forwards 停止在结束状态，不能和infinite结合使用，否则失效
五.弹性盒子flex，不遵循行内、块级、行内块
1.给父级设置 display: flex; 和对齐方式 //变成弹性盒子
2.主轴对齐方式（水平对齐方式）
/* 到尾部 */
/* justify-content: flex-end; */
/* 居中 */
/* justify-content: center; */
/* 盒子两边间隙一样 */
/* justify-content: space-around; */
/* 盒子与盒子的距离一样 */
/* justify-content: space-between; */
/* 盒子与容器之间距离相等 */
/* justify-content: space-evenly;*/
3.侧轴对齐方式（垂直对齐）
align-items:flex-start;
align-items:center;
align-items:flex-end;
align-items: stretch;（默认对齐）
4.默认主轴宽度由内容撑开，侧轴高度等于父盒子
5.flex:1; 给子盒子设置，没设置宽度的，由剩下空白部分撑开
6.修改主轴方向属性: flex-direction：
row 行, 水平(默认值)
column * 列, 垂直
row-reverse 行, 从右向左
column-reverse 列, 从下向上
7.弹性盒子换行显示 : flex-wrap: wrap;
调整行对齐方式 ：align-content
取值与justify-content基本相同
六.flex布局
1.使用flex-direction改变元素排列方向
修改主轴方向属性: flex-direction
属性值 作用
row 行, 水平(默认值)
column * 列, 垂直
row-reverse 行, 从右向左
column-reverse 列, 从下向上
2.弹性盒子换行
使用flex-wrap实现弹性盒子多行排列效果
弹性盒子换行显示 : flex-wrap: wrap;
调整行对齐方式 ：align-content;
取值与justify-content基本相同
七.移动适配、媒体查询
rem ： 目前多数企业在用的解决方案
vw / vh：未来的解决方案
@media (媒体特性){
选择器{
CSS属性
}}
如：@media (width:320px){
html{
font-size:32px;
}}
1.rem
rem单位
相对单位
rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小
目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10，所以视口宽度320px换成32px
2.vw / vh
相对视口的尺寸计算结果
vw：viewport width
1vw = 1/100视口宽度
vh：viewport height
1vh = 1/100视口高度
实现在不同宽度的设备中，网页元素尺寸等比缩放效果
确定设计稿对应的vw尺寸 （1/100视口宽度）
查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）
vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )
八.Less
Less是一个CSS预处理器, Less文件后缀是.less
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
vscode插件：Easy Less ，less文件保存自动生成css文件
1.运算：
加、减、乘直接书写计算表达式
除法需要添加 小括号 或 .
2.使用变量设置共同属性值：
先定义：@变量名：变量值； @fontcolor:red;
使用：.box{
color:@fontcolor
}
a:{
color:@fontcolor
}
注意：表达式存在多个单位以第一个单位为准
重点：less可以嵌套类名，也是最大的优点
3.用Less导入写法引用其他Less文件
@import “文件路径”;
4.导出CSS文件
Less文件第一行添加如下代码, 注意文件夹名称后面添加
禁止导出
在less文件第一行添加: // out: false
