样式重置

body,html{
    100%;
    height:100%;
    font-size:14px;
}
html,body,div,span,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,samp,
small,strong,sub,sup,var,
b,i,a,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
    margin:0;
    padding:0;
    outline:0;
    box-sizing:border-box;
}
input,button,textarea,select{
    outline:0;
    box-sizing:border-box;
}
h1,h2,h3,h4,h5,h6,em,i{
    font-weight:100;
    font-style:normal;
}
ul,ol,li{
    list-style-type:none;   
}
a{
    text-decoration:none;
    color:#fff;
}


/*常用公共样式*/
.flex_start{
    display:flex;
    align-items:center;
    justify-content:start;
}
.flex_around{
    display:flex;
    align-items:center;
    justify-content:space-around;
}
.flex_between{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.top50{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}
.left50{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}
.topleft50{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}




/*清除浮动*/
.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix{display:inline-block;}



/* 仅支持 chrome 滚动条样式 */
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
     5px;
    border-radius: 2px;
    #fff;
    overflow: hidden;
}



/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}



/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 2px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    #ccc;
}