补充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)
它有两个参数：
表示我们把动画分成了多少段
比如我们写一个颜色过渡的例子
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表示从时间段的开始连续，即最后一帧被立即执行。当数值越大，动画分的越细，最后一帧显示的就越多。
