CSS进阶
字体图标
字体图标展示的是图标，本质是字体。
处理简单的、颜色单一的图片
字体图标的优点：
灵活性：灵活地修改样式，例如：尺寸、颜色等
轻量级：体积小、渲染快、降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
使用方便：
1.下载字体包
2.使用字体图标
图标库：Iconfont：www.iconfont.cn/
下载字体包：登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地
使用字体图标 - Unicode编码
引入样式表：iconfont.css
复制粘贴图标对应的Unicode编码
设置文字字体
平面转换
改变盒子在平面内的形态（位移、旋转、缩放）
2D转换
平面转换属性 ：transform
语法
transform: translate(水平移动距离, 垂直移动距离);
取值（正负均可）
像素单位数值
百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
技巧
translate()如果只给出一个值, 表示x轴方向移动距离
单独设置某个方向的移动距离：translateX() & translateY()
位移取值为百分比数值，参照盒子自身尺寸计算移动距离
旋转
语法 ： transform: rotate(角度);
注意：角度单位是deg
技巧：取值正负均可
取值为正, 则顺时针旋转
取值为负, 则逆时针旋转
转换原点
语法
默认圆点是盒子中心点
transform-origin: 原点水平位置 原点垂直位置;
取值
方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参照盒子自身尺寸计算）
缩放
语法 ：transform: scale(x轴缩放倍数, y轴缩放倍数);
技巧
一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小
渐变背景
background-image: Linear-gradient{
颜色1，
颜色2
}
空间转换
空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
空间转换也叫3D转换
属性：transform
语法
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值（正负均可）
像素单位数值
百分比
透视
属性（添加给父级）
perspective: 值;
取值：像素单位数值， 数值一般在800 – 1200。
作用 ：空间转换时，为元素添加近大远小、近实远虚的视觉效果
空间旋转
语法
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
x，y，z 取值为0-1之间的数字
左手法则
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
立体呈现
实现方法
给盒子父元素添加 transform-style: preserve-3d;
使子元素处于真正的3d空间
按照需求设置子盒子的位置（位移或旋转）
空间缩放
语法
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);
动画
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧
实现步骤：
1.定义动画
@keyframes 动画名称 {
from{}
to{}
}
或用%代替from、to
2.使用动画
animation：动画名称 动画花费时长；
animation-name 动画名称
animation-duration 动画时长
animation-delay 延迟时间
animation-fill-mode 动画执行完毕时状态 forwards：最后一帧状态 backwards：第一帧状态
animation-timing-function 速度曲线 steps(数字)：逐帧动画
animation-iteration-count 重复次数 infinite为无限循环
animation-direction 动画执行方向 alternate为反向
animation-play-state 暂停动画 paused为暂停，通常配合:hover使用
逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
animation-timing-function: steps(N)； 将动画过程等分成N份
百分比布局
百分比布局， 也叫流式布局
效果： 宽度自适应，高度固定。
Flex布局
Flex布局/弹性布局：
是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题
作用
基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局
设置方式
父元素添加 display: flex，子元素可以自动的挤压或拉伸
组成部分
弹性容器
弹性盒子
主轴
侧轴 / 交叉轴
主轴对齐方式
修改主轴对齐方式属性: justify-content
flex-start 默认值, 起点开始依次排列
flex-end 终点开始依次排列
center 沿主轴居中排列
space-evenly 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-around 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等
侧轴对齐方式
修改侧轴对齐方式属性:
align-items（添加到弹性容器）
align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
flex-start 默认值, 起点开始依次排列
flex-end 终点开始依次排列
center 沿侧轴居中排列
stretch 默认值, 弹性盒子沿着主轴线被拉伸至铺满容器
伸缩比
属性 :flex : 值;
取值分类 :数值(整数)
主轴方向
Flex布局模型中，弹性盒子默认沿着水平方向排列
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
row 行, 水平(默认值)
column 列, 垂直
row-reverse 行, 从右向左
column-reverse 列, 从下向上
弹性盒子换行
弹性盒子换行显示 : flex-wrap: wrap;
调整行对齐方式 ：align-content
取值与justify-content基本相同
