什么是Css Reset呢?
在 HTML标签在浏览器里有默认的样式，不同浏览器的默认样式之间也会有差别。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。（参考百度百科：Css Reset）
常用Css Reset(一)：Eric Meyer’s “Reset CSS” 2.0
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}
常用Css Reset(二)：HTML5 Doctor CSS ResetGet
/** * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) * Richard Clark (http://richclarkdesign.com) * http://cssreset.com */html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}body { line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;}nav ul { list-style:none;}blockquote, q { quotes:none;}blockquote:before, blockquote:after,q:before, q:after { content:''; content:none;}a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}/* change colours to suit your needs */ins { background-color:#ff9; color:#000; text-decoration:none;}/* change colours to suit your needs */mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}del { text-decoration: line-through;}abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help;}table { border-collapse:collapse; border-spacing:0;}/* change border colour to suit your needs */hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}input, select { vertical-align:middle;}
常用Css Reset(三)：Yahoo! (YUI 3) Reset CSS
/** * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/) * http://cssreset.com * Copyright 2012 Yahoo! Inc. All rights reserved. * http://yuilibrary.com/license/ *//* TODO will need to remove settings on HTML since we can't namespace it. TODO with the prefix, should I group by selector or property for weight savings?*/html{ color:#000; background:#FFF;}/* TODO remove settings on BODY since we can't namespace it.*//* TODO test putting a class on HEAD. - Fails on FF. */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 { margin:0; padding:0;}table { border-collapse:collapse; border-spacing:0;}fieldset,img { border:0;}/* TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...*/address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal;} ol,ul { list-style:none;} caption,th { text-align:left;}h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal;}q:before,q:after { content:'';}abbr,acronym { border:0; font-variant:normal;}/* to preserve line-height and selector appearance */sup { vertical-align:text-top;}sub { vertical-align:text-bottom;}input,textarea,select { font-family:inherit; font-size:inherit; font-weight:inherit;}/*to enable resizing for IE*/input,textarea,select { *font-size:100%;}/*because legend doesn't inherit in IE */legend { color:#000;}/* YUI CSS Detection Stamp */#yui3-css-stamp.cssreset { display: none; }
常用Css Reset(四)：Universal Selector ‘*’ Reset
/* cssreset.com */* { margin: 0; padding: 0;}
常用Css Reset(五)：Normalize.css 1.0
/*! normalize.css v1.0.0 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /* * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. */ article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary { display: block;} /* * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */ audio,canvas,video { display: inline-block; *display: inline; *zoom: 1;} /* * Prevents modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0;} /* * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, * and Safari 4. * Known issue: no IE 6 support. */ [hidden] { display: none;} /* ========================================================================== Base ========================================================================== */ /* * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using * `em` units. * 2. Prevents iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-size: 100%; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */} /* * Addresses `font-family` inconsistency between `textarea` and other form * elements. */ html,button,input,select,textarea { font-family: sans-serif;} /* * Addresses margins handled incorrectly in IE 6/7. */ body { margin: 0;} /* ========================================================================== Links ========================================================================== */ /* * Addresses `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted;} /* * Improves readability when focused and also mouse hovered in all browsers. */ a:active,a:hover { outline: 0;} /* ========================================================================== Typography ========================================================================== */ /* * Addresses font sizes and margins set differently in IE 6/7. * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0;} h2 { font-size: 1.5em; margin: 0.83em 0;} h3 { font-size: 1.17em; margin: 1em 0;} h4 { font-size: 1em; margin: 1.33em 0;} h5 { font-size: 0.83em; margin: 1.67em 0;} h6 { font-size: 0.75em; margin: 2.33em 0;} /* * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted;} /* * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */ b,strong { font-weight: bold;} blockquote { margin: 1em 40px;} /* * Addresses styling not present in Safari 5 and Chrome. */ dfn { font-style: italic;} /* * Addresses styling not present in IE 6/7/8/9. */ mark { background: #ff0; color: #000;} /* * Addresses margins set differently in IE 6/7. */ p,pre { margin: 1em 0;} /* * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. */ code,kbd,pre,samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em;} /* * Improves readability of pre-formatted text in all browsers. */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word;} /* * Addresses CSS quotes not supported in IE 6/7. */ q { quotes: none;} /* * Addresses `quotes` property not supported in Safari 4. */ q:before,q:after { content: ''; content: none;} small { font-size: 75%;} /* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */ sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} sup { top: -0.5em;} sub { bottom: -0.25em;} /* ========================================================================== Lists ========================================================================== */ /* * Addresses margins set differently in IE 6/7. */ dl,menu,ol,ul { margin: 1em 0;} dd { margin: 0 0 0 40px;} /* * Addresses paddings set differently in IE 6/7. */ menu,ol,ul { padding: 0 0 0 40px;} /* * Corrects list images handled incorrectly in IE 7. */ nav ul,nav ol { list-style: none; list-style-image: none;} /* ========================================================================== Embedded content ========================================================================== */ /* * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3. * 2. Improves image quality when scaled in IE 7. */ img { border: 0; /* 1 */ -ms-interpolation-mode: bicubic; /* 2 */} /* * Corrects overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden;} /* ========================================================================== Figures ========================================================================== */ /* * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */ figure { margin: 0;} /* ========================================================================== Forms ========================================================================== */ /* * Corrects margin displayed oddly in IE 6/7. */ form { margin: 0;} /* * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;} /* * 1. Corrects color not being inherited in IE 6/7/8/9. * 2. Corrects text not wrapping in Firefox 3. * 3. Corrects alignment displayed oddly in IE 6/7. */ legend { border: 0; /* 1 */ padding: 0; white-space: normal; /* 2 */ *margin-left: -7px; /* 3 */} /* * 1. Corrects font size not being inherited in all browsers. * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, * and Chrome. * 3. Improves appearance and consistency in all browsers. */ button,input,select,textarea { font-size: 100%; /* 1 */ margin: 0; /* 2 */ vertical-align: baseline; /* 3 */ *vertical-align: middle; /* 3 */} /* * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button,input { line-height: normal;} /* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Corrects inability to style clickable `input` types in iOS. * 3. Improves usability and consistency of cursor style between image-type * `input` and others. * 4. Removes inner spacing in IE 7 without affecting normal text inputs. * Known issue: inner spacing remains in IE 6. */ button,html input[type="button"], /* 1 */input[type="reset"],input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ *overflow: visible; /* 4 */} /* * Re-set default cursor for disabled elements. */ button[disabled],input[disabled] { cursor: default;} /* * 1. Addresses box sizing set to content-box in IE 8/9. * 2. Removes excess padding in IE 8/9. * 3. Removes excess padding in IE 7. * Known issue: excess padding remains in IE 6. */ input[type="checkbox"],input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ *height: 13px; /* 3 */ *width: 13px; /* 3 */} /* * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box;} /* * Removes inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;} /* * Removes inner padding and border in Firefox 3+. */ button::-moz-focus-inner,input::-moz-focus-inner { border: 0; padding: 0;} /* * 1. Removes default vertical scrollbar in IE 6/7/8/9. * 2. Improves readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */} /* ========================================================================== Tables ========================================================================== */ /* * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0;}
注：本文大部分内容来自http://www.cssreset.com/