佘慧婕-20201029

一、知识点总结

（一）动画
      1、ease匀速 ease-in匀加速 ease-out匀减速，此后跟秒数
           all是所有都有后续效果，all后也可跟秒数
           过渡一般不会写在伪类选择里，一般放在类选择器里
      2、伪类选择器中transition中的各类：
           rotate旋转，rotateY延y轴旋转
           scale(1.5);缩放，>1放大  1>x>0缩小
           skew倾斜
           translate()平移
           matrix()扭曲，其中它的参数是一个两行三列的三角函数矩阵，如transform: matrix(-1,-1,-1,0,1,1)
      3、如果让很多动画同时出现：
           就在同一个transition中用空格将每一个动画的程序分隔开来，如transform: scale(1.2) rotate(360deg) skew(1.5);
      4、使子容器超出父容器的部分隐藏：overflow: hidden;
  （二）自定义动画
      1、animation:change 3s;其中分别是：绑定动画； 动画名称、播放时间
      2、animation: change 3s ease 1s forwards  infinite alternate running;其中依次是：动画名称、播放时间 、播放轨迹、延迟时间、停留在最后一帧、播放次数、infinite循环播放、在infi后alterna交替循环播放、running播放、inherit不让播放
      3、更换背景颜色：@keyframes change
      4、通过XX%{}可以定义在不同时段的动画样式
  （三）盒子模型
      1、边距：
          （1） 外边距margin：margin-top上外边距、margin-bottom下外边距
          （2）内边距（也叫内填充，当设置了padding时相当于设置的那一块被填充了）：padding-top上内边距，最后bigbox的大小于原设置宽高+padding的px
          （3）如果是padding：100px 200px 300px 100px（上 右 下 左）
                   如果是padding：100px 200px（上下 左右）
                   如设置边距大小一样可简写margin：...px padding也一样
                   margin是最底层的，顺序依次是border、content、padding、background-image、background-color、margin
      2、边框
          （1）dashed虚线 
          （2）box-sizing: content-box;/*不包含边框*/  ；box-sizing: border-box;/*包含边框*/
          （3）盒子边际阴影:外阴影（默认）box-shadow: 3px 3px 3px yellow;仅右边和下边有，前两值都为0则每个边都有
          （4）内阴影： box-shadow: 3px 3px 3px yellow inset;
      3、圆角
          （1）border-radius: 50%;/*圆角*/
          （2）border-radius: 30px;/*圆角*/方角变圆角
          （3）左下角变圆角：border-bottom-left-radius: 100px;
          （4）border-bottom-right-radius: ;右下角  ；border-top-left-radius: ;左上角
  （四）块标签和行级标签的属性转化
      1、块级标签加float（浮动）就有了行级标签不独占一行的特点
           特别注意：使用浮动时，一定外面再加个标签使其嵌套起来，加个容器(标签)包起来
      2、向左浮动：float: left;    向右浮动：float: right;

二、学习心得
今天的课程开始听的时候有一点点跟不上，但是后面逐渐就能跟上节奏了，知识点也都听得懂，基本上没有对知识点的疑问，有的都当堂解决了。