布局css 标签重置以及类的初始化模板

/**
 * 
 * @ 进行全局标签初始化
 * 
 * -------------------------------------------------------
 * 
 */
a, abbr, acronym, address, html,applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video,input {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
word-wrap: break-word;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   font-size: 12px;
}
button, input, select, textarea {
outline: 0;
-webkit-box-sizing: border-box;
border: none;
}
li, ol, ul {
list-style: none
}
a {
color: #333;
text-decoration: none;
    border:none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color:transparent;
    outline:none;
}
img {
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
-webkit-touch-callout: none
}
/**
 * 
 * @ 使用Flexible Box 单行
 * 进行父级子级初始化
 * ------------------------------------------------------------
 * 
 */
.elasticity-flex-appParent{
display: -webkit-flex;
display: -webkit-box;
display: -moz-box;
display: flex;
}
.elasticity-flex-appAchild{
-webkit-flex: 1;
-moz-box-flex: 1;
flex: 1;
}
.elasticity-flex-appAchild1{
-webkit-flex: 0;
-moz-box-flex: 0;
flex: 0;
}
.elasticity-flex-appAchildInput{
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-flex: 0 0 5%;
-moz-box-flex: 0 0 5%;
flex: 0 0 5%;
}
.elasticity-flex-appAchildText{
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-flex: 0 0 15%;
-moz-box-flex: 0 0 15%;
flex: 0 0 15%;
}
.elasticity-flex-appAchildWidth{
-webkit-flex: 2;
-moz-box-flex: 2;
flex: 2;
}
/**
 * 
 * @ 对父级容器宽度不够子容器列表自动换行列表 初始化 
 * 
 * ------------------------------------------------------------
 * 
 */
.elasticity-flex-appParentList{
display: -webkit-flex;
display: -webkit-box;
display: -moz-box;
-webkit-flex-wrap: wrap;
-webkit-align-content: flex-start;
align-content: flex-start;
-webkit-flex-flow: row  wrap;
display: flex;
}
.elasticity-flex-appWidthList{
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-flex:0 0 50%;
flex: 0 0 50%;
}
.elasticity-flex-appWidthList1{
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-flex:0 0 16%;
flex: 0 0 16%;
}
/**
 * 
 * @ 针对需要控制字数单行溢出截断字符 初始化
 * 
 * -------------------------------------------------------------
 * 
 */
.am-text-truncate {
  word-wrap: normal; /* for IE */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}


/**
 * 
 * @ 采用常规化初始化
 * 
 * -----------------------------------------------------------
 * 
 */
.cler{zoom:  1;}
.cler:after{
    content: "";
    display: block;
    clear: both;
}
.fl{float: left;}
.fr{float: right;}


/**
 * 
 * @ 轮播图全局共用
 * 
 * -----------------------------------
 * 
 */
.commons-banner li{text-align: center;}






/**
 * 
 * @ 列表全局通用
 * 
 * -----------------------------------
 * 
 */
.commons-ul span{display: block;color: #666;}
.commons-ul span img.commons-img-list{width: 4.4rem;height: 2.6rem;border: 1px solid #CCCCCC;}
.commons-ul a{padding: 12px;border-top: 1px solid #CCC;}
.commons-ul a p{margin-top:2px;}
.commons-ul a span:nth-child(2){margin-left: 12px;}
.commons-ul-i-color{color: red;}
/**
 * 
 * @ floter 底部通用
 * 
 * -----------------------------------
 * 
 */
.floter{position: fixed;bottom: 0;width: 100%;background: #CCCCCC;padding:6px 0;}
.floter a{display: block;text-align: center;}
.floter a i,
.floter a span{
display: block;
}
.floter a span{margin-top: 4px;}
/**
 * 
 * @ 媒体查询
 * 
 * ----------------------------------------------
 * 
 */


@media only screen and (min-width:481px) {
    html {
        font-size: 94%!important
    }
}


@media only screen and (min-width:561px) {
    html {
        font-size: 109%!important
    }
}


@media only screen and (min-width:641px) {
    html {
        font-size: 125%!important
    }
}