小技巧

图片改尺寸
        给img添加尺寸，就会跟父元素一样大了
        width:100%;
        height:100%;

鼠标经过，让元素显示出来
例如：鼠标经过，视频变暗，播放
1、首先 
子绝--position: absolute;
父相--position: relative;
2、然后把子元素隐藏  display: none;
利用伪元素::before(添加在元素的前面)（添加在后面是::after）
div::before {
            position: absolute;
            display: none;
            width: 100%;
            height: 100%;
            content: '';
            background: rgba(0, 0, 0, 0.6);
        }
3、鼠标经过再显示出来子元素
div:hover::before{
            display: block;
        }

鼠标经过，变色
.div1:hover{
            display: block;
            background: blue;
        }
       

圆形--border-raius:50%;
        盒子阴影--标签:hover{ box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.3);}
        文字阴影--直接给文字添加样式--text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.8);

伪元素清楚浮动
::after{
conter: "";--伪元素必写的属性
display:block;--转化为块元素
height:0;
clear:both;--清楚浮动
visibility:hidden;--隐藏元素
}