陈菊-20201029

知识总结

<!--动画-->

ctrl +/=注释
ctrl+shift=整理代码

.box{
    width: 200px;
    height: 200px;
    background: red;
    margin:0 auto;
    transition: all 3s ease-in; /*过渡*/
}


.box:hover{
    width: 600px;
    background: yellow;
    transform:rotate(360deg) ;/*旋转*/
                transform: scale();/*缩放*/
                transform: skew(-45deg);/*倾斜*/
                transform: translate();/*平移*/
                transform: matrix(1,-1,0,0,-1,1);/*扭曲 两行三列的三角函数矩阵*/
                overflow: hidden;/*子容器超出父容器的部分隐藏*/


                animation:change/*动画名称*/
                                 3s/*动画播放时间*/ 
                                 ease/*播放轨迹*/ 
                                 1s/*延时播放（隔一秒变）*/ 
                                 forwards/*让动画停在最后一帧*/
                                 2/*播放两次*/ 
                     infinite/*来回播正负播*/ 
                                 inherit/*控制是不是播放*/


<!--盒子模型-->                                  

                                 小盒子：外边距
                                  margin-top:20px
                                  margin-botom
                                  magin:20px

                                 大盒子：内边距
                                  padding-top:20px

                                  padding :100px 200px 300px 400px;/*上右下左 顺时针*/
                                  magin: 0 auto；水平居中
                                  padding: 100px;/*写两个上下左右 写四个上右下左*/
                                  box-sizing: border-box;/*包含边框 content-box 不包含边框*/
                                  box-shadow: 3px 3px 3px yellow inset;/*水平 垂直  模糊  内阴影  边框*/
                                  border-radius: 50%;/*圆角*/
                                  border-bottom-right-radius:200px ;/*右下角*/

                                  border-width
                                  inset /*盒子内阴影*/
                                  border-radius: 50%;/*圆角*/

              
<!--页面布局-->  

<!--
        块标签和行级标签的属性转化
       1、块级标签加float（浮动）就有了行级标签不独占一行的特性
        特别注意：使用float时，一定外面加个容器包起来
            -->
                                  float: left;/*浮动*/

心得体会
今天是实训的第四天，今天学习很吃力，老师讲得太快了记不下来希望老师后面可以稍微放慢一点速度。
每天都在学习新内容，基础差所以学习过程中感觉挺累的，安排下来的作业也要花很长时间才能完成。今
天学习了动画、盒子模型和页面布局的常用命令。虽然过程很辛苦，但是收获也是很大的。明天依旧和老师
一起继续学习呀！