对代码的理解

意义

代码里面没有对错，只要效果实现了就可以。而且只在特定的结构之下，某一种写法是最简单的，我们要了解不同写法的优势和区别，工作中灵活的去选择

伪元素与hover属性连写时注意事项，

细节

before after选择关系时，例如a ：hover包含before after，此时注意中间直接冒号连写，中间不需要空格。

a:hover::after

a:hover::before

中间不需要空格，不需要空格！

1；字体图标：

简单介绍：

字体图标展示的是图标，本质是字体。
处理简单的，颜色单一的图片。
灵活性，轻量级，兼容性，使用方便
1. 下载字体包
2. 使用字体图标

Unicode图标引入法（不方便，不常用）

引入iconfont.css文件
通过i标签把unicode编码复制过来
设置span标签的家族样式，font-family:'iconfont'
修改字体颜色，尺寸大小

类名方式图标引入法（方便，常用）

iconfont类：基本样式。包含字体的使用等
icon-xxx：图标对应的类名
行内元素，必须要加上两个类名
class:iconfont icon-(需要用的图片名称)

在线引入字体图标时注意

需要加个http的前缀协议，可以使服务器加载速度加快显示出来

2；平面转换概念

三大类：位移，旋转，缩放

平面转换

也可以叫2D转换，因为xy轴两个方向

平面转换属性：transform

1.位移：

语法：transform:translate（水平移动距离，垂直移动距离）

取值：正负均可，像素单位数值/百分比 x轴正向为左右，y轴正向为上下/ 小优势特点百分比（参照物为盒子自身尺寸）

技巧：translate()如果只给出一个值，表示x轴方向移动距离

单独设置某个方向的移动距离：translateX()&translateY()

小知识

margin和定位的百分比单位都是相对于“父元素”，只有位移translate百分比是相对于“自身的”

设置盒子往左边移动，可以使用三个方法

定位
margin
位移，动态酷炫效果，建议使用位移，性能有优化。（推荐使用）

思想

先实现主要效果（大概的位置布局）

大盒子和两个小盒子的位置摆放（加上颜色）定位

再去实现次要的
鼠标移入
特效位移 translate 过度
背景图片效果等

2.旋转：

语法:transform:rotate(角度/deg)

取值正数顺时针旋转，负的话逆时针旋转

补充知识：transform-origin 转换原点；使用origin属性改变转换原点
默认圆点是盒子中心点

多重转换：

transfrom复合属性

当位移和旋转共同出现的时候
先位移后旋转
先旋转后位移
以上的两个效果不一样 / 原因：先旋转的时候，物体在旋转的时候坐标系也跟着旋转了。
推荐：先位移；再去旋转

transform复合属性注意事项

细节

正规写法，先位移，再旋转。因为旋转可以改变坐标的轴向，坐标轴向受到影响，位移的方向也会受到影响。
不能拆开写的原因是因为css具有层叠性，下面的会覆盖上面的代码。所以只能取符合属性的方法。
如果一个标签要展示多重转换效果，既添加位移，又要旋转，包含缩放都要有，那写的时候应该这么写呢？答：使用transform复合属性，旋转一定要放最后。

3.缩放：

transform:scale 改变元素的尺寸。(x轴缩放倍数，y轴缩放倍数)
技巧：一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放；transform:scale（缩放倍数）

伪元素额外知识：

元素标签不支持伪元素的几种情况

单闭合标签不支持伪元素，例如img,input等闭合标签

3；渐变

属性介绍

使用background-image属性

渐变是多个颜色逐渐变化的视觉效果

一般有哦那个与设置盒子的背景

一般情况

渐变：一定要给背景图片添加不是背景/颜色！！（渐变不是单指一种颜色）
两种颜色比较常用渐变

分层渐变效果

多层渐变不常用！

渐变方向

方位名词

还有角度 deg

总结

要给背景图片添加
设置多种渐变色
设置多种渐变色分层效果
设置渐变颜色方向

字体图标-平面转换-渐变