马伟婷-20201029

知识总结

background-color: beige;/*背景颜色*/
    background-image: url(../img/cs.jpg);/*背景图片*/
    background-position: -100px;/*图片平移/
transition:all 5s ease 3s/*all所有属性都有过渡效果 时长 匀速*/;
    transition: width 3s;
    background: url();/*背景图片*/
    overflow: hidden;/*子容器超出父容器的部分隐藏*/
    
    background-size: cover;/*背景图片大小 cover等比例缩放不失真*/
    background-attachment: fixed;
    opacity: 0.5;/*透明度*/
    background-color: transparent;/*背景全透明*/
    /*background-size: 300px 300px;/**/
    background-repeat: no-repeat/*repeat-x延x轴平铺*/;
    background-size: cover;
    background-attachment: ;/*背景图片固定*/
transition:all 5s ease 3s/*all所有属性都有过渡效果 时长 匀速
    transition: width 3s;
    background: url();/*背景图片*/
    overflow: hidden;/*子容器超出父容器的部分隐藏*/
.box:hover{
    width: 600px宽度过度效果;
    background: olivedrab;/*背景过度效果
    /*transform: rotate(360deg);/*旋转*/
    /*transform: rotateY(75deg);*//*y轴旋转75°*/
    /*transform: scale(1.5);/*缩放*/
    /*transform: skew(-45deg);/*倾斜*/
    /*transform: translate(300px);/*平移-300向左平移*/
    /*transform: matrix(1,1,0,-1,1,0);/*扭曲：2行3列的三角函数矩阵*/
    /*transform: scale(1.2);*//*会覆盖*//*/*/
    transform: scale(1.2)matrix(1,2,3,6,5,4,1,2,3);/*要写在同一条语句里*/
动画播放
盒子模型
块级标签和行级标签的属性转换
            块级标签加了float就有了行级标签不独占一行的特性margin-top:0px;/*外边距*/float:left;/*浮动*/
        margin-bottom:20px;
        border: 1px #dedede solid;
        padding-top:100px 200px 300px 400px;/*内边距/内填充 上右下左*/
        box-shadow:0px 0px 50px yellow inset;/*盒子阴影*/
        box-sizing content-box;/**/
        border-radius:50% ;/*圆角 30px*/
        border-bottom-left-radius:200px;/*左上角圆角*/

心得体会：
今天学了很多东西，需要很长时间去消化，能马上记下来的也不多，教资马上就要考试了，压力有点大。