CSS-初始化模板2(common.css)

这个代码是在网络上找到的，属于一个比较适合移动端的初始化代码，查阅后并对齐进行了一些整理，目前只整理了一部分，后续将慢慢在学习和使用的过程中继续整理。

默认字体大小14px
360px的veiwport屏幕下字体大小18px

清除浮动：.clearfix    .clear
显示元素：.block
隐藏元素：.hide

布局：
    浮动：float、clear
    内联元素、左浮动：.fl
    内联元素、右浮动：.fr
    左侧不浮动：.cl
    右侧不浮动：.cr
    左右侧不浮动：.cb
    定位：position
    相对定位：.rel
    绝对定位：.abs
    水平对齐：text-align
    居左：.tal
    居中：.tac
    居右：.tar
    内联块：.dib
    垂直对齐：vertical-align
    居上：.vat
    居中：.vam
    居下：.vab
网格：
    元素宽度/高度=内边距+边框+自身：.wrap
    元素宽度/高度=内边距+边框+自身、文本居中、内边距上下5px：.box
    Flex：
容器：
    
宽度：
    100%宽度：.w100p
    20%宽度：.w20p
边距：
    5px外边距：.m5
    5px内边距：.p5
    5px上内边距：.pt5

@charset "utf-8";  
html,body{
    background:#f0f0f0;
    color:#505050;
    font-size:62.5%;
    -webkit-user-select:none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color:transparent;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
    -webkit-touch-callout:none;
}  
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 {
    font:14px \5b8b\4f53,‘Helvetica Neue‘,Arial,‘Liberation Sans‘,FreeSans,‘Hiragino Sans GB‘,sans-serif\"Microsoft YaHei"\"微软雅黑";
    line-height:20px;
}  
h1{font-size:24px;}  
h2{font-size:22px;}  
h3{font-size:18px;}  
/*由于在320px、360px、480px的viewporrt宽度下，
 *字体大小一样，320px和480px效果相差不大，
 *于是需要将字体大小重新设计，达到预期效果。
 */
@media only screen and (min-width:360px) {  
    h1{font-size:28px;}  
    h2{font-size:26px;}  
    h3{font-size:22px;}  
    body,button,input,select,textarea {
        font-size:18px;
        line-height:26px;
    }  
}  
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;
} 
textarea{resize:none;}  
/*取消按钮在iphone上的默认样式*/  
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;}  
/*清除浮动*/
.clearfix:before,.clearfix:after {
    content:"";
    display:table;
}  
.clearfix:after {
    clear:both;
    overflow:hidden;
}  
.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:rigth;}  
.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{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    height:100%;
    text-align:center;
    padding:5px 0;
}  
.grid,.wrap,
.grid:after,.wrap:after,
.grid:before,.wrap:before{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}  
.grid{*zoom:1}  
.grid:before,.grid:after{
    display:table;
    content:"";
    line-height:0
}  
.grid:after{clear:both}  
.grid{
    list-style-type:none;
    padding:0;
    margin:0;
}  
.grid>.grid{
    clear:none;
    float:left;
    margin:0 !important
}  
.wrap{float:left;width:100%}  
/*网格*/  
/*flex*/  
.col{
    height:100%;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    display:flex;
    display:-webkit-flex;
    flex-direction:column;
}  
.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*/  
/*容器*/  
.wrapper{
    position:absolute;
    top:0;right:0;bottom:0;left:0;
    padding:5px 5px 60px 5px;
    overflow:auto;
    margin-top:44px;
    -webkit-overflow-scrolling:touch;
}  
/*头尾*/  
header,footer{
    position:fixed;
    right:0;left:0;
    z-index:1;
    text-align:center;
    background:#CCCCCC;
}  
header{top:0;height:44px;}  
footer{bottom:0;}  
  
/*宽度*/  
.w100p{width:100%}  
.w20p{width:20%;}
/*边距*/  
.m5{margin:5px;}  
.p5{padding:5px;}  
.pt5{padding-top:5px;}