我学到的一些知识（html定位中的子绝父相、CSS3的@keyframes 规则）

我学到的（2019.3.24）

声明：本人还是一个大三小白，有错误请谅解。

---

1.HTML中定位及子绝父相的理解

HTML中定位有三种分别是：相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。

相对定位（relative）：相对定位是相对于自身位置进行偏移。当设了相对的偏移量之后，这个DIV原来所占据的位置（文档流）不 会被下面的DIV块挤占，而是空在那里；当偏移后向下或者向右的内容会被隐藏，而 这一点区别于绝对定位，绝对定位会出现滚动条。

绝对定位（absolute）：绝对定位是相对于父容器中含有定位属性的元素进行定位（直接父容器没有他会一层一层往上找，没有的话就相对body）。一个DIV块的位置被定义为绝对定位的时候，也就意味着它失去了文档流的位置，后面的文档流会紧跟着补上来接替它的位置。

固定定位（fixed）：固定定位是相对于浏览器的位置进行偏移。当设了相对的偏移量之后，这个DIV原来所占据的位置（文档流）不 会被下面的DIV块挤占。

 .main-slider {
        float: left;
        width: 735px;
        height: 454px;
        position: relative;
        margin: 12px 0 0 220px;
        overflow:hidden;
    }

    .main-slider ul {
        position: absolute;
        bottom: 10px;
        left: 50%;
        margin-left: -66px;
    }

子绝父相：子元素绝对定位，父元素相对定位。子绝父相的意思是在父类的position属性是relative的情况下，子类的position属性又是absolute的情况下，那么我们的子类这时其实不是在body中absolute而是在其父类的范围中absolute，最好给父类设置边界。

比如下图是未使用和使用了子绝父相的下拉菜单的对比：

---

2.CSS3的@keyframes 规则

#eye,
    #eye2 {
        ......
        -webkit-animation: eye 1s ease infinite;/*名字 时间 无限循环 轮流反向播放*/
        -moz-animation: eye 1s ease infinite;
        -o-animation: eye 1s ease infinite;
        animation: eye 1s ease infinite;
    }
    #eye2 {....}
    #mouth {....}
    @keyframes eye {
        0%,20%,100%{
            -webkit-transform:scale(1,1);/*background:red;*/ /* Safari 和 Chrome */
            -moz-transform:scale(1,1);     /* Firefox */
            -o-transform:scale(1,1);        /* Opera */
            transform:scale(1,1);
        }
        10%{
            -webkit-transform:scale(1,0.2); /*background:blue;*/
            -moz-transform:scale(1,0.2);
            -o-transform:scale(1,0.2);
            transform:scale(1,0.2);
        }
    }
    @-webkit-keyframes eye {     /* Safari and Chrome */
        0%,20%, 100%{
            -webkit-transform:scale(1,1);
            -moz-transform:scale(1,1);
            -o-transform:scale(1,1);
            transform:scale(1,1);
        }
        10%{
            -webkit-transform:scale(1,0.2);
            -moz-transform:scale(1,0.2);
            -o-transform:scale(1,0.2);
            transform:scale(1,0.2);
        }
    }

首先写好要动画的元素，然后@keyframes来创建动画，后面跟着动画名字，from里面放的是动画开始（0%）的样式，to里面放的是动画结束（100%）的样式，然后把动画绑定到选择器，这里有几个选项下面依次来介绍：

animation-name：规定 @keyframes 动画的名称
animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function：规定动画的速度曲线。默认是 “ease”
animation-delay：规定动画何时开始。默认是 0
animation-iteration-count：规定动画被播放的次数。默认是 1
animation-direction：规定动画是否在下一周期逆向地播放。默认是 “normal”
animation-play-state：规定动画是否正在运行或暂停。默认是 “running”
animation-fill-mode：规定对象动画时间之外的状态

上述代码效果：眨眼睛。


0% 圆 -> 10%椭圆->20%圆
类似Flash的动画效果。
会有浏览器兼容问题。