一、盒子模型中的两种模式：标准模式和怪异模式

概念：其实只是盒子模型中的不同模式而已
    元素实际占据的宽高的计算方式不一样而已
        标准模式计算：元素实际占据的宽度 = width + margin + padding + border
        怪异模式计算：元素实际占据的宽度 = width + margin
    语法：
        box-sizing：border-box | content-box
        border-box就是怪异模式，content-box就是标准模式

二、背景渐变

1.线性渐变
    1.普通         background：linear-gradient（颜色1，颜色2）;
    2.改变方向      background：linear-gradient（to 方向的英文，颜色1，颜色2）;        【方向：上下左右】
    3.对角         background：linear-gradient（to 垂直方向 水平方向，颜色1，颜色2）;
    4.角度         background：linear-gradient（*deg，颜色1，颜色2）;                【顺时针旋转】
    5.控制比例      background：linear-gradient（颜色1 *%，颜色2 *%）;                【可以是前面4中写法的任意，在颜色后面加上%几科】

2.径像渐变
    1.普通         background：radial-gradient（颜色1，颜色2）；
    2.控制比例      background：radial-gradient（颜色1 *%，颜色2 *%）；
    3.控制图案      background：radial-gradient（图案，颜色1，颜色2）；【图案：圆：circle 椭圆：ellipse】

3.重复渐变
    repeating-radial-gradient（） 重复径向渐变
    repeating-linear-gradient（） 重复线性渐变

三、过度

语法：
    transition：渐变的属性 渐变的时间  渐变的延迟时间 变化的曲线;

四、动画

1.定义动画
    方式1：
        @keyframes 动画名{
            from{
                动画开始时候的样子
            }
            to{
                动画结束时的状态
            }
        }
    方式2：
         @keyframes 动画名{
            0%{
                动画开始时候的样子
            }
            100%{
                动画结束时的状态
            }
        }
        中间可以有多个状态
2.绑定-执行动画
    animation：动画名 动画执行时间 动画执行次数 动画延迟时间 动画变化曲线 动画下一次执行的方向；
        动画执行次数：可以是数字，可以是无限infinite
        动画下一次执行的方向：alternate代表反向
    暂停动画： animation-play-state:paused;