摘要：
前面的话大部分的时候，作为前端，我们在写CSS样式之前，需要添加一份reset.css。CSSreset不仅用于清除默认样式，更是一种全局样式定义。如果项目前期不定制好CSSreset，后期维护阶段再对其进行修改，将会牵一发而动全身。
前面的话
大部分的时候，作为前端，我们在写 CSS 样式之前，需要添加一份reset.css。CSS reset不仅用于清除默认样式，更是一种全局样式定义。如果项目前期不定制好CSS reset，后期维护阶段再对其进行修改，将会牵一发而动全身。本文将详细介绍CSS reset
reset
以网易NEC的CSS reset为例，来进行说明
/*reset */ html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} table{border-collapse:collapse;border-spacing:0;} caption,th{text-align:left;font-weight:normal;} html,body,fieldset,img,iframe,abbr{border:0;} i,cite,em,var,address,dfn{font-style:normal;} [hidefocus],summary{outline:0;} li{list-style:none;} h1,h2,h3,h4,h5,h6,small{font-size:100%;} sup,sub{font-size:83%;} pre,code,kbd,samp{font-family:inherit;} q:before,q:after{content:none;} textarea{overflow:auto;resize:none;} label,summary{cursor:default;} a,button{cursor:pointer;} h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;} del,ins,u,s,a,a:hover{text-decoration:none;} body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,5b8b4f53;color:#333;outline:0;} body{background:#fff;} a,a:hover{color:#333;}
下面来说明CSS reset的问题
1、不合理的样式重置
例如，html、div 、dt等标签是没有默认padding和margin的
2、生僻标签的样式重置
例如，fieldset 、blockquote、q等标签用的较少，用到时，再进行样式设置即可
3、性能负担
CSS reset 通常会增加浏览器进行样式计算的成本（即有一定的性能负担），因为它引入了许多的针对元素的全局规则，网页中几乎所有元素都会匹配一条乃至几条的reset规则，且往往规则中的属性设定其实会被更特殊的规则所覆盖（比如padding和margin）。极端情况下，可能某条reset规则中的所有属性设置实际上并没有在任何元素上生效（因为全部被更特殊的规则给覆盖了），所有针对此规则的级联计算全都是浪费
基于这些问题，下面是修改版的CSS reset
body{margin:0;font:12px/22px Arial,"微软雅黑";color:#333;} header,footer,section,article,aside,nav,figure{display:block} ul,ol{margin:0;padding:0;list-style:none;} p,dl,dd{margin:0;} h1,h2,h3,h4{margin:0;font-size:100%;} img{border:none;} a{color:#21a557;cursor:pointer;text-decoration:none; } a:active,a:hover{outline：none;} a:hover{text-decoration:underline;} strong{font-weight:normal;} em,i{font-style:normal;} table{border-collapse:collapse;table-layout:fixed;border-spacing:0;} th,td{padding:0;} button,input{box-sizing:border-box;padding:0;border:none;background:none;}
Normalize
Normalize.css 与 reset.css 的风格恰好相反，注重通用的方案，重置掉该重置的样式（例如body的默认margin），保留该保留的 user agent 样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的。Normalize不讲求样式一致，而讲求通用性和可维护性
html { /*统一行高*/ line-height:1.15; /*防止在winPhone和ISO中，因旋转屏幕而造成的字体大小的改变*/ -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; } body { /*去除margin*/ margin:0; } article,aside,footer,header,nav,section,figcaption,figure,main{ /*重置IE8-浏览器的display*/ display:block; } h1 { /*统一字体大小及margin*/ font-size:2em; margin:0.67em 0; } figure { /*重置IE8浏览器的margin*/ margin:1em 40px; } hr { /*重置firefox浏览器的box-sizing*/ box-sizing:content-box; height:0; /*重置IE浏览器的overflow*/ overflow:visible; } pre { /*统一字体大小及字体系统*/ font-family:monospace, monospace; font-size:1em; } a { /*移除IE10中的灰色背景*/ background-color:transparent; -webkit-text-decoration-skip:objects; } abbr[title] { /*移除Chrome57- and Firefox 39-中的border-bottom*/ border-bottom:none; /*统一text*/-decoration text-decoration:underline; text-decoration:underline dotted; } b,strong { /*统一字体重量*/ font-weight:bolder; } code,kbd,samp { /*统一字体系列及字体大小*/ font-family:monospace, monospace; font-size:1em; } dfn { /*重置Android4.3-浏览器的字体样式*/ font-style:italic; } mark { /*重置IE8-浏览器的背景颜色及文本颜色*/ background-color:#ff0; color:#000; } small { /*统一字体大小*/ font-size:80%; } sub,sup { /*去除sub、sup对行高的影响*/ font-size:75%; line-height:0; position:relative; vertical-align:baseline; } sub { /*统一位置*/ bottom:-0.25em; } sup { /*统一位置*/ top:-0.5em; } audio,video { /*重置IE8-浏览器的display */ display:inline-block; } audio:not([controls]) { /*重置iOS 4-7中的display及height*/ display:none; height:0; } img { /*重置IE9-浏览器的border-style*/ border-style:none; } svg:not(:root) { /*重置IE浏览器中的overflow*/ overflow:hidden; } button,input,optgroup,select,textarea { /*统一样式*/ /*移除Firefox and Safari中的margin*/ font-family:sans-serif; font-size:100%; line-height:1.15; margin:0; } button,input { /*重置IE浏览器中的overflow*/ overflow:visible; } button,select { /*重置firefox浏览器中的text-transform*/ text-transform:none; } button,html [type="button"], [type="reset"],[type="submit"] { /*重置webkit浏览器的appearance属性*/ -webkit-appearance:button; } button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { /*重置firefox浏览器中的border和padding*/ border-style:none; padding:0; } button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring { /*统一outline*/ outline:1px dotted ButtonText; } fieldset { /*重置firefox浏览器的padding*/ padding:0.35em 0.75em 0.625em; } legend { box-sizing:border-box; color:inherit; display:table; max-width:100%; padding:0; white-space:normal; } progress { /*重置IE9-浏览器的display*/ display:inline-block; /*重置Chrome*/, Firefox浏览器的vertical-align vertical-align:baseline; } textarea { /*移除IE浏览器中默认的垂直滚动条*/ overflow:auto; } [type="checkbox"],[type="radio"] { /*重置IE9-浏览器的box-sizing及padding */ box-sizing:border-box; padding:0; } [type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button { /*修正Chrome中增加和减量按钮的光标样式*/ height:auto; } [type="search"] { /*重置Chrome and Safari的appearance和outline-offset*/ -webkit-appearance:textfield; outline-offset:-2px; } [type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration { /*在macOS上删除Chrome和Safari中的内填充和取消按钮。*/ -webkit-appearance:none; } ::-webkit-file-upload-button { /*在iOS和Safari中，纠正无法点击的类型。*/ -webkit-appearance:button; font:inherit; } details, menu { /*重置IE8-浏览器的display*/ display:block; } summary { /*统一display*/ display:list-item; } canvas { /*重置IE8-浏览器的display*/ display:inline-block; } template { /*重置IE浏览器的display*/ display:none; } [hidden] { /*重置IE9-浏览器的display */ display:none; }
使用
是否 Normalize.css 就真的比 reset.css 好呢？
也不见得，Normalize.css 中重置修复的很多 bug ，其实在我们的项目中十个项目不见得有一个会用得上，那么这些重置或者修复，某种意义上而言也是所谓的冗余代码
所以，应该根据项目需要，混合部分 reset 或者 normalize，编写了一份适合团队项目的 reset ，做出取舍微调，适量裁剪和修改后再使用
对于一般项目而言，在调用normalize.css之后，再根据实际情况，编写reset.css。当然，这个reset并不是将样式清空，而是设置样式的默认值及常用的工具样式
html{ /*这样，1rem=100px，方便后续计算，不设置为10px是因为chrome下最小字体大小为12px*/ font-size:100px; } body{ /*设置为12px*/ font-size:0.12rem; line-height:1.5; /*不使用纯黑色#000，降低页面对比度*/ color:#222; } a{ color:#666; text-decoration:none; } a:hover,a:active{ color:#0ae; text-decoration:underline; } ::selection{ background-color:#b3d4fc; text-shadow:none; } ul{ margin:0; padding:0; list-style:none; } .fl{float:left;} .fr{float:right;} .clear:after{content:"";display:block;clear:both;} .clear{zoom:1;} /*低版本浏览器提示*/ .browserupgrade{ margin:0; padding:1rem; background-color:#ccc; }