移动web开发------公用css----自己总结

@charset "utf-8";
html, body {
    background: #fff;
    color: #505050;
    font-size: 10px;
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none;  /*webkit浏览器*/
    -ms-user-select: none;   /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;/*这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮，设置颜色的alpha值为0即可*/

    -webkit-touch-callout: none;/*系统默认菜单被禁用*/
    font-family:Tahoma,Arial,Roboto,'Droid Sans','Helvetica Neue','Droid Sans Fallback','Heiti SC',sans-self;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    margin: 0;
    padding: 0;
}

body, button, input, select, textarea {
    line-height: 1;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust: none;
}

body {
    max-width: 750px;
    margin: 0 auto;
}
img {
    width: 100%;
    vertical-align: middle;
}
/*阻止旋转屏幕时自动调整字体大小*/
textarea {
    resize: none;
}
/*取消按钮在inphone上的默认样式*/
input[type=button] {
    -webkit-appearance: none;
    outline: none
}

input::-webkit-input-placeholder {
    color: #F0F0F0;
}

textarea::-webkit-input-placeholder {
    color: #F0F0F0;
}

input::-webkit-input-speech-button {
    display: none
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

th {
    text-align: inherit;
}

fieldset, img {
    border: none;
}

abbr, acronym {
    border: none;
    font-variant: normal;
}

del {
    text-decoration: line-through;
}

ol, ul {
    list-style: none;
}

caption, th {
    text-align: left;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

ins, a, a:hover {
    text-decoration: none;
}

a:focus, *:focus {
    outline: none;
}
small{ font-size: 90%;}
/*清除浮动*/
.clearfix:before, .clearfix:after, header:before, header:after, footer:before, footer:after,
.col-1:before, .col-1:after, .col-2:before, .col-2:after, .col-3:before, .col-3:after,
.col-4:before, .col-4:after, .col-5:before, .col-5:after, .col-6:before, .col-6:after,
.col-7:before, .col-7:after, .col-8:before, .col-8:after, .col-9:before, .col-9:after,
.col-10:before, .col-10:after, .col-11:before, .col-11:after, .col-12:before, .col-12:after,
.row:before, .row:after {
    content: "";
    display: table;
}

.clearfix:after, footer:after, header:after, .col-1:after, .col-2:after, .col-3:after,
.col-4:after, .col-5:after, .col-6:after, .col-7:after, .col-8:after, .col-9:after,
.col-10:after, .col-11:after, .col-12:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

.clear {
    clear: both;
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
}

.hide {
    display: none;
}

.block {
    display: block;
}

.outL {
    white-space: normal;
    word-break: break-all;
    width: 100px;
}

.outH {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100px;
}

/*布局*/
.fl {
    float: left;
    display: inline;
}

.fr {
    float: right;
    display: inline;
}

.cb {
    clear: both;
}

.cl {
    clear: left;
}

.cr {
    clear: right;
}

.rel {
    position: relative;
}

.abs {
    position: absolute;
}

.tac {
    text-align: center;
}

.tal {
    text-align: left;
}

.tar {
    text-align: right;
}

.dib {
    display: inline-block;
}

.vab {
    vertical-align: bottom;
}

.vam {
    vertical-align: middle;
}

.vat {
    vertical-align: top;
}

/*元素垂直 水平居中*/
.box {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    -moz-box-align: center;
    display: -o-box;
    -o-box-orient: horizontal;
    -o-box-pack: center;
    -o-box-align: center;
    display: -ms-box;
    -ms-box-orient: horizontal;
    -ms-box-pack: center;
    -ms-box-align: center;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

/*flex*/
.row {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-direction: wrap;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-lines: multiple;
    width: 100%;
    height: auto;
    margin: auto;
}

.flex1 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.flex2 {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    flex: 2;
}

.flex3 {
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    flex: 3;
}

/*flex*/

/*宽度*/
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
.col-7,.col-8,.col-9,.col-10 .col-11,.col-12{
   float: left;
}
.col-1 {
    width: 8.33333333%;
}

.col-2 {
    width: 16.66666667%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33333333%;
}

.col-5 {
    width: 41.66666667%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33333333%;
}

.col-8 {
    width: 66.66666667%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33333333%;
}

.col-11 {
    width: 91.66666667%;
}

.col-12 {
    width: 100%;
}