day1
一、字体图标
1 字体图标
字体图标展示的是图标，本质是字体。处理简单的、颜色单一的图片
2 字体图标的优点
灵活性：灵活地修改样式，例如：尺寸、颜色等轻量级：体积小、渲染快、降低服务器请求次数兼容性：几乎兼容所有主流浏览器使用方便：
1.下载字体包
2.使用字体图标
3 下载字体包
登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地
步骤：
1.引入字体图标样式表
2.**
方法1：调用图标对应的类名，必须调用2个类名iconfont类：基本样式，包含字体的使用等icon-xxx：图标对应的类名
方法2：使用字体图标 - Unicode编码
引入样式表：iconfont.css复制粘贴图标对应的Unicode编码设置文字字体
方法3：使用伪元素***
方法4：在线引入
注意：
1.使用默认浏览器打开需要在前面添加http：
2.需要有网络，实际开发使用本地下载较多
二、平面转换
平面转换改变盒子在平面内的形态（位移、旋转、缩放）2D转换平面转换属性transform
1 位移
目标：使用translate实现元素位移效果
语法transform: translate(水平移动距离, 垂直移动距离);取值（正负均可）
1.像素单位数值
2.百分比（参照物为盒子自身尺寸）
3.注意：X轴正向为右，Y轴正向为下
技巧
1.translate()如果只给出一个值, 表示x轴方向移动距离
2.单独设置某个方向的移动距离：translateX() & translateY()
3.transform对行内元素不起效果
1.1 绝对定位居中
目标：使用translate快速实现绝对定位的元素居中效果
核心代码：
原理位移取值为百分比数值，参照盒子自身尺寸计算移动距离
2 旋转
语法transform: rotate(角度);注意：角度单位是deg技巧：取值正负均可取值为正, 则顺时针旋转取值为负, 则逆时针旋转
2.1 转换原点
语法默认原点是盒子中心点transform-origin: 原点水平位置 原点垂直位置;
取值
1.方位名词（left、top、right、bottom、center）
2.像素单位数值
3.百分比（参照盒子自身尺寸计算）
2.2 多重转换
transform: translate() rotate();
多重转换原理旋转会改变网页元素的坐标轴向先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
3 缩放
语法transform: scale(x轴缩放倍数, y轴缩放倍数);
技巧
1.一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
2.transform: scale(缩放倍数);
3.scale值大于1表示放大, scale值小于1表示缩小
4.缩放和旋转没有先后顺序
三、渐变
使用background-image属性实现渐变背景效果
渐变是多个颜色逐渐变化的视觉效果一般用于设置盒子的背景
语法：
拓展：
1.颜色后面可以加百分比，代表颜色占比
半透明遮罩层
语法：
