day09

1、单位em的使用：相对于当前对象内文字大小进行设置。假设字体大小没有改变，默认是16px，此时1em=16px
1em=父级的字体大小
2、rem：相当于根字体的大小进行设置（root），html字体。

html{
        font-size: 20px
    }
.box{
        width: 5rem ;
        height: 7rem;
        background-color: red;
    }

3、移动端的完全适配
引入js文件，安装插件（px to rem），找到编辑左下角的设置，搜索px->css rem，更改字体大小就可以了。
在750px的设计稿中测量出来的数据直接书写，直接回车就可以获取定义的rem的值

4、1vw:相当于可视窗口宽度的百分之一
1vh:相当于可视窗口高度的百分之一

5、动画（逐帧设置每一步的动画）。
属性：animation。
属性值：动画名 动画执行时间 动画的运行方式 动画的延迟 动画执行次数 动画的运行方向 动画的停留状态 动画的暂停
必填项：动画名 动画执行时间

.box{
    width: 100px;
    height: 100px;
    background-color: red;
    animation: myMove 3s;
}
/* 需求：页面加载完成，盒子变成宽高为200px，背景颜色变成蓝色 */
/* 声明动画，可以添加给任意元素 */
@keyframes myMove {
    from{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    to{
        width: 200px;
        height: 200px;
        background-color: blue;
    }
}

/* 逐帧 动画 */
@keyframes myMove {
    0%{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    50%{
        width: 150px;
        height: 150px;
        background-color: aqua;
    }
    100%{
        width: 200px;
        height: 200px;
        background-color: blue;
    }
}

6、3D

.box{
        width: 200px;
        height: 200px;
        border: 1px solid red;
        /* 给父元素开启3D模式 */
        transform-style: preserve-3d;
        /* 给父元素开启景深 */
        perspective: 1000px;
    }
.box img:hover{
        transform: translateX(100px) translateY(1000px) translateZ(100px);
        /* 最多有两个值，不能再写第三个值 */
        transform: translate(100px,200px);
        /* 3D里面必须写三个值 */
        transform: translate3d(100px,200px,300px);
        transform: scaleX(-1);
        transform: rotateX(45deg);
    }

7、网格布局