一、平面转换
使用transform属性实现元素的位移、旋转、缩放等效果
改变盒子在平面内的形态（位移、旋转、缩放）
2D转换
属性：transform
1.1位移
语法：Transform：translate（说移动距离，垂直移动距离）；
取值：（正负均可）
像素单位数值
百分比（参照物为盒子自身尺寸）
注意：x轴正向为右，Y轴正向为下
技巧：
Translate（）如果只给出一个值，表示x轴方向移动距离
单独设置某个方向的移动距离：translateX（） translateY（）
1.2旋转
语法：transfrom：rotate（角度）
注意：角度单位是deg
技巧：取值正负均可
1.2.1转换原点
语法：
默认圆点是盒子中心点
tranform-origin：原点水平位置 原点垂直位置；
取值：
方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参照盒子自身尺寸计算）
1.3多重转换
注意：连写先写translate
Transform：translate（） rotate（）；
1.4缩放
语法：
Transform：scale（x轴缩放倍数，y轴缩放倍数）；
技巧：
一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放
Transform：scale（缩放倍数）；
1.5渐变背景
渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景
二、空间转换
使用transform属性实现元素在空间内的位移、旋转、缩放等效果
空间：是从坐标轴角度定义的。X、y和z三条坐标轴构成了一个立体空间，z轴位置于视线方向相同。
空间转换也叫3D转换
属性：transform
1.1空间位移
语法：
transform：translate3D(x,y,z)；
transform：translateX(值）；
transform：translateY(值）；
transform：translateZ(值）；
取值：（正负均可）
像素单位数值
百分比
1.2透视
属性：（添加给父级）
perspective：值；
取值：像素单位数值，数值一般在800-1200.
1.3空间旋转
语法：
transfrom：rotateZ（值）；
transfrom：rotateX（值）；
transfrom：rotateY（值）；
左手法则：
判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向。
拓展
rorate3D（x，y，z，角度度数）：用来设置自定义旋转轴的位置及旋转的角度
X，y，z取值为0-1之间的数字
1.3.1立体呈现
使用transfrom-style：preserve-3d呈现立体图形
使子元素处于真正的3D空间
呈现立体图形步骤
1、盒子父元素添加transfrom-style：preserve-3d；
2、按需求设置子盒子的位置（位移或旋转）
1.3.2 3D导航
实现思路
1. 搭建立方体
li标签
添加立体呈现属性transfrom-style：preserve-3d；
添加旋转属性（为了便于观察效果，完成后删除）
a标签
调节a标签的位置
a标签定位（子绝父相）
一部分添加旋转和位移样式
第二部分添加位移样式
1.4空间缩放
语法：
transfrom：scaleX（倍数）；
transfrom：scaleY（倍数）；
transfrom：scaleZ（倍数）；
transfrom：scale3d（x，y，z）；
三、动画
实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
步骤
1. 定义动画
2. 使用动画
速度曲线：
匀速：linear
分段动画：steps（分多少段），分段执行
重复次数：
无线循环：infinity
动画方向：
alternate
执行完毕的状态：
默认值：backwards
动画停留在结束的状态：forwards
注意：
动画名称和动画时长必须赋值
取值部分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
重复次数、动画方向 不要和 执行完毕的状态同时设置
3.1逐帧动画
逐帧动画一般配合精灵图实现动画效果。
精灵动画制作步骤
准备显示区域
设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
定义动画
改变背景图的位置（移动的距离就是精灵图的宽度）
使用动画
添加速度曲线steps（n），n与精灵图上小图个数相同
添加无限重复效果
3.2多组动画
四、移动端网页
4.1 PC端网页和移动端网页的区别
PC屏幕大，网页固定版心
手机屏幕小，网页宽度多数为100%
4.2分辨率
物理分辨率：是生产屏幕时就固定的，它是不可被改变的
逻辑分辨率：是由软件（驱动）决定的
4.3视口
使用meta标签设置视口宽度，制作适配不同设备宽度的网页
手机屏幕尺寸都不同，网页宽度为100%
网页的宽度和逻辑分辨率尺寸相同
4.4百分比布局
也叫流式布局
效果：宽度自适应，高度固定
五、Flex布局
也叫弹性布局
是一种浏览器提倡的布局模型，布局网页更简单、灵活，避免浮动脱标的问题
5.1 Flex布局模型构成
作用：基于Flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离标准流现象发生。
Flex布局非常适合结构化布局
设置方式：
父元素添加display：flex，子元素可以自动的挤压或拉伸
组成部分：
弹性容器
弹性盒子
主轴
侧轴/交叉轴
5.2主轴对齐方式
属性：justify-content
5.2.1主轴方向
主轴默认是水平方向，侧轴默认是垂直方向
修改主轴方向属性：flex-direction
5.3侧轴对齐方式
属性：align-iems（添加到弹性容器）
align-self控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
5.4伸缩比
属性：flex：值；
取值分类：数值（整数）
注意：只占父盒子剩余尺寸
5.5弹性盒子换行
属性：flex-wrap：wrap；
调整行对齐方式：align-content
取值与justify-content基本相同
六、移动适配
6.1 rem
网页效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）
rem单位：
相对单位
rem单位是相对于html标签的自豪计算结果
1rem=1html字号大小
目前rem布局方案中，将网页等分成10份，html标签的字号为视口宽度的1/10
rem单位尺寸
1. 确定设计稿对应的设备的html标签字号
查看设计稿宽度→确定参考设备宽度（视口宽度）→确定基准根字号（1/0视口宽度）
2. rem单位的尺寸
rem单位的尺寸=px单位数值/根基准字号
6.1.2媒体查询
设置差异化CSS样式
6.1.3 flexible
Flexible是手淘开发出的一个用来适配移动端的js框架
核心原理就是根据不同的视口宽度给网页仲html根节点设置不同的font-size
写在body的最后
< body >
< script scr=”js文件的路径”>< /script>
< /body >
6.2 Lesss
是CSS预处理器，less文件后缀是.less。扩充了CSS语言，使CSS具备一定的逻辑性、计算能力。
通过less可以实现完成px单位到rem单位的转换
注意：浏览器不识别less代码，网页要引入对应的CSS文件
VScode插件：easy less
作用：less文件保存自动生成css文件
6.2.1注释
单行注释
语法：//注释内容
快捷键：ctrl+/
块注释
语法：/注释内容/
快捷键：shift+alt+A
6.2.2运算
加、减、乘直接书写计算表达式
除法需要添加小括号或.
6.2.3嵌套
作用：快速生成后代选择器
语法：
注意：&不生成后代选择器，标签当前选择器，通常配合伪类或伪元素使用
6.2.4变量
存储数据，方便使用和修改
语法：
定义变量：@变量名：值；
使用变量：CSS属性：@变量名；
6.2.5 less导入
网页引入方式：
CSS：书写link标签
Less：导入
导入：@import “文件路径”；
6.2.6导出CSS文件
方法1：
配置easyless插件，实现所有less有相同的导出路径
配置插件：设置→搜索easyless→在setting.json中编辑→添加代码”out ”:”../css/”（注意，必须是双引号）
方法2：
在less文件首行书写//out: 路径（./css/） 单独给当前less文件设置导出路径。
6.2.7禁止导出
在less文件第一行添加： //out: false
6.2.8压缩导出
在less文件第一行添加： //compress:true
6.3 vw/vh
相对单位
相对视口的尺寸计算结果
Vw：viewport width
1vw=1/100视口宽度
Vh：viewport height
1vh=1/100视口高度
6.3.1 vw适配原理
Vw单位尺寸
1. 确定设计稿对应的vw尺寸（1/100视口宽度）
查看设计稿宽度→确定参考设备宽度（视口宽度）→确定vw尺寸（1/100视口宽度）
2. Vw单位的尺寸=px单位数值/（1/100视口宽度）
6.3.2 vh适配原理
Vh单位尺寸
1.确定设计稿对应的vh尺寸（1/100视口宽度）
查看设计稿宽度→确定参考设备高度（视口高度）→确定vh尺寸（1/100视口高度）
2.Vh单位的尺寸=px单位数值/（1/100视口高度）
七、响应式布局
7.1媒体查询
开发常用写法
媒体特性常用写法
Max-width
min-width
完整写法
书写顺序：
min-width（从小到大）
max-width（从大到小）
媒体类型：
用来区分设备类型，入屏幕设备、打印设备等，手机、电脑、平板都属于屏幕设备。
媒体特性：
用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏
7.2 媒体查询-link写法
外链式CSS引入
7.3 BootStrap
官网：https：//www.bootcss.com/
使用步骤：
1.引入：BootStrap提供的CSS代码
2.调用类：使用BootStrap提供的样式
Container：响应式布局版心类
7.3.1 BootStrap栅格系统
将整个网页的宽度分成若干等份
BootStrap3默认将网页分成12等份
.container是BootStrap中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
.container-fluid也是BootStrap中专门提供的类名，所有应用改类名的盒子，宽度均为100%
分别使用.row类名和.col类名定义栅格布局的行和列。
注意：
1. container类自带间距15px
2. row类自带间距-15px
7.4手册用法
网站首页→BootStrap3中文文档→全局CSS样式→按分类导航查找目录类
7.5插件使用
步骤：
引入BootStrap样式
引入js文件：jQuery.js+BootStrap.min.js
复制HTML结构，并适当调整结构或内容
