一切为了敏捷开发:
http://blog.sina.com.cn/s/blog_71ed1b870101a52w.html
看一个这个博客:http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin:0; padding:0;box-sizing: border-box;} body { font-size:12px; color:#707070; font-family: Microsoft YaHei;background: #f6f6f6;line-height: 2; box-sizing: content-box; letter-spacing: -0.8px; } div,span,p{ letter-spacing: -0.8px; } fieldset, img { border:0; } ol, ul { list-style:none; } h1, h2, h3, h4, h5, h6{ font-size:100%; } em { font-style:normal; } input, button, select, textarea { outline:none; } textarea { resize:none; } //禁用了文本的拖拉,尤其在谷歌下 p{ text-align:justify; text-justify:distribute;text-indent:2em;} //为了使文本段落左右两边对齐 p{word-wrap:break-word} a {text-decoration:none; } i{display: inline-block;} span{display: inline-block;} /*对于div p span 的继承color*/ p{ color: inherit; } /*a:hover { color: #f60; text-decoration:none; }*/ address,cite,code,em,th {font-weight:normal; font-style:normal;} a{color:inherit;text-decoration:none;display: inline-block;} /*a:link{color:#009;}*/ /*a:visited{color:#800080;}*/ a:hover,a:active,a:focus{text-decoration:underline;} table { border-collapse:collapse; border-spacing:0; } /*应该把自己喜欢的下拉框,表格,之类*/ /*一些自己平时喜欢使用的式样*/ .fl{float: left!important;} .fr{float: right!important;} /*1,2,3,5,8,10,15,20,30,50,70,100*/ .ml1{margin-left: 1px!important}.ml2{margin-left: 2px!important}.ml3{margin-left: 3px!important}.ml5{margin-left: 5px!important}.m8{margin-left: 8px!important}.ml10{margin-left: 10px!important}.ml15{margin-left: 15px!important}.ml20{margin-left: 20px!important}.ml30{margin-left: 30px!important}.ml50{margin-left: 50px!important}.ml60{margin-left: 60px!important}.ml70{margin-left: 70px!important}.ml100{margin-left: 100px!important} .mr1{margin-right: 1px!important}.mr2{margin-right: 2px!important}.mr3{margin-right: 3px!important}.mr5{margin-right: 5px!important}.m8{margin-right: 8px!important}.mr10{margin-right: 10px!important}.mr15{margin-right: 15px!important}.mr20{margin-right: 20px!important}.mr30{margin-right: 30px!important}.mr50{margin-right: 50px!important}.mr70{margin-right: 70px!important}.mr100{margin-right: 100px!important} .mtf1{margin-top: -1px!important}.mtf2{margin-top: -2px!important}.mtf3{margin-top: -3px!important}.mtf5{margin-top: -5px!important}.mtf7{margin-top: -7px!important}.mtf10{margin-top: -10px!important} .mt1{margin-top: 1px!important}.mt2{margin-top: 2px!important}.mt3{margin-top: 3px!important}.mt5{margin-top: 5px!important}.m8{margin-top: 8px!important}.mt10{margin-top: 10px!important}.mt15{margin-top: 15px!important}.mt20{margin-top: 20px!important}.mt30{margin-top: 30px!important}.mt50{margin-top: 50px!important}.mt70{margin-top: 70px!important}.mt100{margin-top: 100px!important} .mb1{margin-bottom: 1px!important;}.mb2{margin-bottom: 2px!important;}.mb3{margin-bottom: 3px!important;}.mb5{margin-bottom: 5px!important;}.m8{margin-bottom: 8px!important;}.mb10{margin-bottom: 10px!important;}.mb15{margin-bottom: 15px!important;}.mb20{margin-bottom: 20px!important;}.mb30{margin-bottom: 30px!important;}.mb50{margin-bottom: 50px!important;}.mb70{margin-bottom: 70px!important;}.mb100{margin-bottom: 100px!important;} .h1{height: 1px!important;}.h2{height: 2px!important;}.h3{height: 3px!important;}.h5{height: 5px!important;}.h8{height: 8px!important;}.h10{height: 10px!important;}.h15{height: 15px!important;}.h20{height: 20px!important;}.h30{height: 30px!important;}.h50{height: 50px!important;}.h70{height: 70px!important;}.h100{height: 100px!important;} .w1{width: 1px}.w2{width: 2px}.w3{width: 3px}.w5{width: 5px}.m8{width: 8px}.w10{width: 10px}.w15{width: 15px}.w20{width: 20px}.w30{width: 30px}.w50{width: 50px}.w70{width: 70px}.w100{width: 100px} /*这个属性的时候必须和h1或者其他的h结果*/ .wp3{width: 3%;}.wp5{width: 5%;}.wp7{width: 7%;}.wp10{width: 10%;}.wp15{width: 15%;}.wp20{width: 20%;}.wp25{width: 25%;}.wp30{width: 30%;}.wp40{width: 40%;}.wp50{width: 50%;}.wp60{width: 60%;}.wp100{width: 100%;} .f12{font-size: 12px;}.f13{font-size: 13px;}.f14{font-size: 14px;}.f15{font-size: 15px;}.f16{font-size: 16px;}.f17{font-size: 17px;}.f18{font-size: 18px;}.f20{font-size: 20px;} .fc000{color: #000;}.fcfff{color: #fff;} .fcyellow{color:yellow;} .row{width:100%;} .test{border: 1px solid red;} .mauto{margin:0 auto;} .inlineblock{display: inline-block;} .clearfix{ overflow: hidden; } .clearfix:after{ clear: both; content: ""; display: block; height: 0; visibility: hidden; } .block{display: block;} /*对于行内样式这个时候就不能show和hide了,这个必须使用removeClass('none')*/ .none{display: none!important;} .block{ display: block!important; } /*absolute relative*/ .absolute{position: absolute;} .relative{position:relative;} .text-center{ text-align: center; } /*normalize.css 一些东西添加进来*/ html { -ms-text-size-adjust: 100%; /* 3 */ -webkit-text-size-adjust: 100%; /* 3 */ } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], /* 1 */ [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, /* 1 */ menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; }
我们最好有自己的一些总结和看法哈
下边的的是wap的初始化样式哈。
这里是yan Sir的东西了
/* CSS Document */
/*yan 参考m.le.com的样式,采用rem的单位,body和html默认是12px的值*/
*{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;font-family:Arial, "微软雅黑";}
img{border:none;max-width:100%;vertical-align:middle;}
body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6{margin:0;padding:0;list-style:none;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-size:100%;}
input,textarea{-webkit-user-select:text;-ms-user-select:text;user-select:text;-webkit-appearance:none;font-size:1em;line-height:1.5em;}
table{border-collapse:collapse;}
input,select,textarea{outline:none;border:none;background:none;}
a{outline:0;cursor:pointer;*star:expression(this.onbanner=this.blur());}
a:link,a:active{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{color:#f00;text-decoration:underline;}
a{text-decoration:none;-webkit-touch-callout:none;}
em,i{font-style:normal;}
li,ol{list-style:none;}
html{font-size: 12px;}
.clear{clear:both;height:0;font-size:0;line-height:0;visibility:hidden; overflow:hidden;}
.fl{float:left;}
.fr{float:right;}
body{
margin:0 auto;max-width:640px; min-width:320px;color:#555; padding-bottom:8%;background:#fef9f1;height:100%;
font-size: 12px;
}
/*@media screen and (max-width:320px){body,input,select{font-size:10px}}
@media screen and (min-width:320px){body,input,select{font-size:11.25px}}
@media screen and (min-width:400px){body,input,select{font-size:12.5px}}
@media screen and (min-width:480px){body,input,select{font-size:13.75px}}
@media screen and (min-width:560px){body,input,select{font-size:15px}}
@media screen and (min-width:600px){body,input,select{font-size:16.25px}}
@media screen and (min-width:640px){body,input,select{font-size:18px}}*/
/*这里是闫为了自己的敏捷开发设置的一些样式*/
/*应该把自己喜欢的下拉框,表格,之类*/
/*一些自己平时喜欢使用的式样*/
.fleft{float: left!important;}
.fright{float: right!important;}
/*1,2,3,5,8,10,15,20,30,50,70,100*/
/*这个属性的时候必须和h1或者其他的h结果*/
.f12{font-size: 12px;}.f13{font-size: 13px;}.f14{font-size: 14px;}.f15{font-size: 15px;}.f16{font-size: 16px;}.f17{font-size: 17px;}.f18{font-size: 18px;}.f20{font-size: 20px;}
.row{width:100%;}
.test{border: 1px solid red;}
.mauto{margin:0 auto;}
.inlineblock{display: inline-block;}
.clearfix{
overflow: hidden;
}
.clearfix:after{
clear: both;
content: "";
display: block;
height: 0;
visibility: hidden;
}
.block{display: block;}
/*对于行内样式这个时候就不能show和hide了,这个必须使用removeClass('none')*/
.none{display: none!important;}
.block{
display: block!important;
}
/*absolute relative*/
.absolute{position: absolute;}
.relative{position:relative;}
.text-center{
text-align: center;
}