所谓的HTML默认样式就是当我们写一段HTML代码，然后不写任何css样式，这段代码在浏览器界面上还是有样式存在。例如<html></html>、h1~h6等都有默认样式，自己可以在浏览器上查看。
可以看到<body></body>默认加了margin:8px;，然后样式来自于user agent stylesheet，这是浏览器的默认样式表。
默认样式在我们开发过程中会带来一些问题，我们通常需要重写样式覆盖默认样式，通常称之为CSS Reset。
CSS Reset
最暴力的CSS Reset方案：
*{
margin:0px;
padding:0px;
}最早的一份CSS Reset来自Tantek 的undohtml.css，下面是代码：
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved. */
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,
fieldset,input{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }从URL中的日期可以看出时间是2004年，Tantek根据自身需要对于一些标签进行了简单的重置。
在Google搜索css reset后出现的第一个结果，网址如下：
https://meyerweb.com/eric/tools/css/reset/代码如下：
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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;
}我们可以看到这份文件的日期是2011年1月26日,整个代码将一些默认样式暴力清除了。
雅虎的YUI团队也出了一份CSS Reset方案：
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
/**
* Percents could work for IE, but for backCompat purposes, we are using keywords.
* x-small is for IE6/7 quirks mode.
*/
body {
font:13px/1.231 arial,helvetica,clean,sans-serif;
*font-size:small; /* for IE */
*font:x-small; /* for IE in quirks mode */
}
/**
* Nudge down to get to 13px equivalent for these form elements
*/
select,
input,
button,
textarea {
font:99% arial,helvetica,clean,sans-serif;
}
/**
* To help tables remember to inherit
*/
table {
font-size:inherit;
font:100%;
}
/**
* Bump up IE to get to 13px equivalent for these fixed-width elements
*/
pre,
code,
kbd,
samp,
tt {
font-family:monospace;
*font-size:108%;
line-height:100%;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssfonts { display: none; }下面应该是中国最早的一份CSS Reset：
/* KISSY CSS Reset
理念：清除和重置是紧密不可分的
特色：1.适应中文 2.基于最新主流浏览器
维护：玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)
*/
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
margin: 0;
padding: 0;
}
/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
/*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
/* 用 ascii 字符表示，使得在任何编码下都无问题 */
}
h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
/* 重置列表元素 */
ul, ol { list-style: none; }
/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
border-bottom: 1px dotted;
cursor: help;
}
q:before, q:after { content: ''; }
/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */
/* 注：optgroup 无法扶正 */
button, input, select, textarea {
font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}
/* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 重置 hr */
hr {
border: none;
height: 1px;
}
/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }这是玉伯和正淳这两位前辈完成的，向前辈致敬。
仔细观察上面不同时代不同作者的CSS Reset代码可以看出，很多都是采用一刀切的方案，多了很多冗余代码，而且例如h1~h6这种具有语义化的标签，去除默认样式后而又没有设置它们本身语义化该有的样式，导致越来越多人弄不清它们的语义。从另一个角度讲这也是div满天飞，缺乏语义化标签的一个重要原因。
Normalize.css
只要思想不滑坡，方法总比问题多，所以出现了Normalize.css这样的新方案。
Normalize.css简介
知乎上面的张小核桃这样评价Normalize.css：
CSS Reset 是革命党，CSS Reset 里最激进那一派提倡不管你小子有用没用，通通给我脱了那身衣服，凭什么你 body 出生就穿一圈 margin，凭什么你姓 h 的比别人吃得胖，凭什么你 ul 戴一胳膊珠子。于是 *{margin:0;}等等运动，把人家全拍扁了。看似是众生平等了，实则是浪费了资源又占不到便宜，有求于人家的时候还得贱贱地给加回去，实在需要人家的默认样式了怎么办？人家锅都扔炉子里烧了，自己看着办吧。
Normalize.css是改良派。他们提倡，各个元素都有其存在的道理，简单粗暴地一视同仁是不好的。body 那一圈确实挤压了页面的生存空间，那就改掉。士农工商，谁有谁的作用，给他们制定个规范，确保他们在任何浏览器里都干好自己的活儿。
Normalize.css是国外两位大牛花了几百个小时来研究不同浏览器的默认样式的差异才写出来的，是前辈心血结晶，向前辈致敬。
Normalize.css注释完整，每一段代码都说明了作用，官网中对它的描述如下：
- Preserves useful defaults, unlike many CSS resets.
- Normalizes styles for a wide range of elements.
- Corrects bugs and common browser inconsistencies.
- Improves usability with subtle modifications.
- Explains what code does using detailed comments.
Normalize.css没有一刀切，而是注重通用的方案，重置掉该重置的样式，保留该保留的 user agent 样式，同时进行一些bug的修复。相比于传统的CSS Reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。
Github：https://github.com/necolas/normalize.css/总结
无论是使用CSS Reset还是使用Normalize.css，在我看来，没有最好的只有最适合自己的。
留言