布局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;

}

/**

 * 

 * @ 采用常规化初始化

 * 

 * -------
92b4
----------------------------------------------------

 * 

 */

.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

    }

}