李生晓-20201029

动画
transition: all 3s ease;/*过度*//*让动画播放时长*/
动画时长是必须的
width: 600px;/*宽度*/
旋转 
transform: rotate(360deg);/*旋转*/
transform: scale(0.7);/*缩放*/
transform: skew(45);/*倾斜*/
transform: translate(300);/*平移*/
transform: matrix(1,-1,-1,0,-1,-1);/*扭曲：2行3列的三角函数矩阵*/
overflow: hidden;/*子容器超出父容器的部分隐藏*/
background-size: 300px;/*图片大小*/
动画变换

红变黄
from{
        background: red;
    }
    to{
        background: yellow;
    }
animation: change 3s ease 1s forwards infinite alternate inherit;/*动画名称 持续时间  播放轨迹 延迟播放 次数/循环播放 停到最后一帧 动画不让播放
盒子模型
小盒子：外边距：margin-top:20px 
            下面       margin-bottom:20px
大盒子：内边距：padding-top:20px
            左边：    padding-left: 0px;
padding:100px 100px 100px 100px 上右下左
margin: 0 auto;/*居中*/
边框：
border:5px #dedede dashed;/*虚线边框*/
box-sizing: content-box;/*盒子实际大小*/
    box-shadow: 0px 0px 50px black inset;/*盒子阴影*/
border-width：1px
border-color


.bigbox{
    width: 400px;
    height: 400px;
    margin: 0 auto;/*居中*/
    background: red;
    margin;
    }
.smallbox{
    width: 300px;
    height: 300px;
    margin: 0 auto;/*居中*/
    background: yellow;
}
块级标签行级标签的属性转换
1.块级标签加float(浮动）就有了行级标签不独占一行的特性
特别注意：使用float时，一定外面加个容器包起来
<div class="page">
            <div class="left"></div>
            <div class="right"></div>
        </div>

心得体会：通过今天的学习学习的动画的变换，感觉还可以接受。但是临近下课时讲的块级标签和行级标签的属性转换是一脸懵逼。老师在用5G讲，我用2G的速度记，根本跟不上。
希望老师讲慢些，多给一些我们自主练习的时间。才能消化吸收！