盒子模型、渐变、过度和动画

盒子模型、渐变、过度和动画

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

​ 概念： 其实只是盒子模型中的不同模式而已

元素实际占据的宽高的计算方式不一样而已

标准模式计算：元素实际占据的宽度 = 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：动画名 动画执行时间 动画执行次数 动画延迟时间 动画变化曲线 动画下一次执行的方向；

举个例子：

animation：a 3s 4 2s linear alternate;

动画执行次数：可以是数字，可以是无限infinite

动画下一次执行的方向：alternate代表反向

暂停动画： animation-play-state:paused;