样式重置

body,html{
    width: 100%;
    height: 100%;
    /*这样会使1rem=10px;或者子元素的1em=10px*/
    /* font-size: 62.5%; */
}
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 {
    font-size: 14px;
    margin:0;
    padding:0;
    /* border:0; */
    outline: 0;
    box-sizing: border-box;
    position: relative;
}
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;
}
button:active{
    transform: translateY(2px);
}

/* 常用公共样式 */
.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;}