补充HTML笔记

1、用于隐藏时的hover使用

（1）控制子元素的隐藏展示，选择器用后代选择器就可以

        .father_div {//父亲

        }

        .child_div {//儿子

            width: 50px;

            height: 50px;

            background-color: yellow;

            display: none;

        }

        .father_div:hover .child_div {

            display: block;

（2）控制兄弟元素的隐藏展示，用+选择器就可以

        .second_div {

            width: 50px;

            height: 50px;

            background-color: yellowgreen;

            display: none;

        }

        .first_div:hover+.second_div {

            display: block;

        }

        .second2_div {

            width: 50px;

            height: 50px;

            background-color: yellowgreen;

            display: none;

        }

        .first2_div:hover+div+div+.second2_div {

            display: block;

        }   

2、margin和padding的区别

（1）margin(主外)

1、语法结构

（1）margin-left:10px; 左外边距

（2）margin-right:10px; 右外边距

（3）margin-top:10px; 上外边距

（4）margin-bottom:10px; 下外边距

（5）margin:10px; 四边统一外边距

（6）margin:10px 20px; 上下、左右外边距

（7）margin:10px 20px 30px; 上、左右、下外边距

（8）margin:10px 20px 30px 40px; 上、右、下、左外边距

（2）padding（主内）

语法结构

（1）padding-left:10px; 左内边距

（2）padding-right:10px; 右内边距

（3）padding-top:10px; 上内边距

（4）padding-bottom:10px; 下内边距

（5）padding：10px; 四边统一内边距

（6）padding:10px 20px; 上下、左右内边距

（7）padding:10px 20px 30px; 上、左右、下内边距

（8）padding:10px 20px 30px 40px; 上、右、下、左内边距

3、CSS3 中 animation的steps属性

      语法：steps(number , position)

      它有两个参数：

      1. number：数值

          表示我们把动画分成了多少段

          比如我们写一个颜色过渡的例子

    div{

      width: 100px;

      height: 100px;

      text-align: center;

      line-height: 100px;

      margin: 100px auto;

      background-color: rgb(255, 115, 0);

      animation: run 10s steps(1,start);

    }

    @keyframes run{

      0%{background-color: blue;}

      20%{background-color: red;}

      40%{background-color: yellow;}

      60%{background-color: purple;}

      80%{background-color: green;}

      100%{background-color: rgb(0, 0, 0);}

    }

当 number 值为1，代表我们把 0%-20% 分成一段显示，其它比如 20%-40% 等 同理，都分成1段显示，即颜色是一下跳转过去的

当 number 值为2，代表我们把 0%-20% 分成2段显示，即，中间有一个过渡色

当 number 值越大，代表分的段数越多，越像一个流畅的动画，但是它的本质还是帧动画

2.position  表示动画是从时间段的开头连续还是末尾连续

支持两个关键字：

start

end

1）start

我们可以发现我们上面的例子中用的都是start

结果是：

数值为1时，第一个颜色不显示

数值为2时，第一个颜色显示为紫色，而不是蓝色

数值为100时，第一个颜色显示为蓝色

这是为什么呢？

其实是因为 start 表示从时间段的末尾连续，第一帧被立即执行。当数值越大，动画分的越细，第一帧显示的就越多。

2）end

end表示从时间段的开始连续，即最后一帧被立即执行。当数值越大，动画分的越细，最后一帧显示的就越多。