@charset "UTF-8";
/*css reset*/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
body, div, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
table{border-collapse: collapse; border-spacing: 0}
fieldset, img{border: 0}
address,caption,cite,code,dfn,em,strong,th,var{font-style: normal;font-weight: normal}
ol,ul{list-style: none;}
input,button{outline-style: none;}
caption,th{text-align: left}
h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal}
q:before,q:after{content: ‘‘} /*引用，在<q></q>标签之间的文字两头加上引号(")*/
abbr,acronym{border: 0}
a{text-decoration: none}
img{border: 0;}
video{background-color: #000000;}
/*hr{border:none;height: 1px;background-color: #000000;}/!*以高度作为线宽的<hr>类型*!/*/
hr{border:none;height:0;border-top: 1px solid #000000;}/*以上边框为 线宽 的<hr>类型 */
/*border-top-style 属性设置一个元素的顶部边框样式。
border-top-width 属性设置一个元素的顶部边框的粗细；
border-top-color 设置元素的上边框的颜色。*/
/*钩子,去掉这些废弃标签的属性，把他们当成空盒子使用，下面三个都是行内标签*/
s, i, em {font-style: normal;text-decoration: none;}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/*功能型*/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.fl{float: left;display: inline;}
.fr{float: right;display: inline;}
.pr{position: relative;}
/*内墙法清除浮动，这种方法墙的高度是可以设置的*/
.clear{clear: both;}
/*相当于内墙法,*/
.clearfix:before,
.clearfix:after {content: "";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1; /*IE/7/6*/}
/*i标签作为这个空字符，让行内元素垂直居中用*/
i.font{display:inline-block;height:100%;vertical-align: middle;}
/*s标签作为雪碧图的容器*/
i.img{display: inline-block;}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
原文地址：https://www.cnblogs.com/wfblog/p/8747986.html