祈长有-20201029

知识总结

（1）
.box{
    width: 200px;
    height: 200px;
    background:red;
    margin: 0 auto;
    transition:all 3s ease;/*过渡 all/ width：3s  匀速    匀加速*/
}
.box:hover{
    transform:rotate(360deg);/*旋转  度*/
    transform:scale(0.7);/*缩放*/
    transform:skew(45deg)；/*倾斜*/
    transform:translate(300px)；/*平移*/
    transform:matrix(1,-1,-1,0,-1,1);/*扭曲；两行三列的三角函数矩阵*/
    transform:rotate(45deg) scale(1.2) matrix(1,-1,-1,0,-1,1);/*多个实现*/
    /*transform:rotateY(90deg);/*沿y轴旋转 90度*/*/
    /*width: 600px;
    background:yellow;*/

（2）
.box{
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border: 2px yellow solid;
    /*background: url(../img/t0196c652bd7f745ba4.jpg);*/
    transition: all 3s;
    overflow: hidden;/*子容器超出父容器的部分隐藏*/
    border-radius:100px;
    background-size: 180px 200px;
    
.box:hover{
    transform: rotateY(180deg);
    background: url(../img/t0196c652bd7f745ba4.jpg);
    background-position: -100px 0;
    
}   
.box img{
    transition: all 3s;
}
.box img:hover{
    transform: scale(1.2);}
    
（3）
.box{
    width: 200px;height: 200px;margin: 0 auto;background: red;/*animation: change 3s  定义动画;*/
}
.box:hover{
    animation: change 3s ease 1s forwards 3; /*infinite 循环播放     3指三次*/
    animation: change 名称  3s 持续时间   ease 轨迹  1s 延迟播放  forwards 最后一阵   infinite 循环播放    alternate正反重复循环   inherit 循环不播放;
}
@keyframes change{
    from{
        background: red;红色
    }
    to{
        background: green/yellow;绿色/黄色
    }
0%{
        transform: scale(1.2);
}
11%{
        background: yellow;
}
45%{
        width: 300px;
}
70%{
        height: 300px;
}
100%{
        transform: rotate(146deg);
}
（4）盒子模型
小盒子；外边距margin
margin-top：20px；
大盒子；内边距padding
padding-top：20px
大小一样时 简写如下（margin：20px；）
marrgin：0 auto；水平居中
border-width：1px边框的宽
border: 1px #dedede solid;一个像素浅灰色实现

padding-top: 100px;  padding-left: 100px; 填充
border: 1px #dedede solid;
background: yellow;/*背景颜色黄色*/
margin-left: 100px;左
    margin-right: 100px;右
    margin-bottom: 100px;下面
padding:100px;100px;100px;100px;上右下左
box-sizing: content-box; 包含border-box  不包含content-box
box-shadow: 3px 3px 3px yellow;水平阴影距离/垂直/模糊距离/颜色
inset内阴影
padding-top: 100px;  padding-left: 100px; 填充
    box-sizing: content-box;/*盒子实际大小*/
    box-shadow: 3px 3px 3px yellow;/*盒子阴影*/
    border-radius: 50%;/*圆角*/
    border-radius: 30px;/*像素*/
border-top-left-radius:200px;
    border-top-right-radius:200px;
    border-top-left-radius:  100px;
border-bottom-right/left-radius  border-top-left-radius: -right/left-radius: 100px;左下角/右上角
（5）快级标签和行级标签属性转换
*{
    margin: 0;
    padding: 0;
    border: 0;  
}
.page{
    width: 600px;
    height: 600px;
    margin: 0 auto;
    border: 2px #dedede solid;  
}
.left{
    width: 200px;
    height: 200px;
    background: red ;
    float: left;/*浮动*/
}
.right{
    width: 200px;
    height: 200px;
    background: yellow;
    float: left;/*浮动*/
.bottom{
    width: 500px;
    height: 200px;
    background: blue ;
}
/*margin: 20px;*/
（6）
<link rel="stylesheet" href="../css/style3.css"bigbox">
 <!---快级标签和行级标签属性转换
        1.块级标签加float（浮动）就有了行级标签不独占一行的特性
        特别注意；使用float时，一定外面加个容器包起来--->
            <div class="page">
                <div class="headert">
                    <div class="left"></div>
                    <div class="right"></div>
                </div>
                    <div class="bottom"></div>
            </div>   

心得体会
1.今天开始，基本上打开软件知道自己要干什么，明白相关命令的填写。
2.对水平阴影距离/垂直/模糊距离基本掌握，明白块级标签加float（浮动）就有了行级标签不独占一行的特性。
3.盒子模型明白内外大小。
4.定义动画中对循环了解、圆角的设置等。
5.子容器超出父容器的部分隐藏overflow: hidden部分掌握。