CSS 默认样式、样式重置

浏览器差异问题一直是前端的开发难点。

[b]（1）默认样式[/b]

default style sheet、user agent stylesheet、built-in stylesheet

学习HTML/CSS首先要理解，各浏览器对标签预先都设定了不一样的默认CSS。
比如：
大部分浏览器会把链接显示成蓝色，把点击过的链接显示成紫色。
但不同浏览器不同版本默认显示h1的字体大小是不一样的。
还有最为明显的是很多元素的margin和padding是有很大区别。

世界上第一张网页：
https://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

IE11渲染效果：
[img]http://dl2.iteye.com/upload/attachment/0129/5940/12b7a5ee-4d9c-3c6c-b6e1-3c0ea09570b1.png[/img]

Chrome52.png渲染效果：
[img]http://dl2.iteye.com/upload/attachment/0129/5942/733695f8-6698-3bb3-b044-d42578fe0566.png[/img]

Firefox59.png渲染效果：
[img]http://dl2.iteye.com/upload/attachment/0129/5944/c3239ee6-85e3-3578-a4a2-2807d2ec94d3.png[/img]

其实这个在CSS规范里也有详细的记述：

CSS 1规范：https://www.w3.org/TR/CSS1/#basic-concepts
[quote]Each User Agent (UA, often a "web browser" or "web client") will have a default style sheet that presents documents in a reasonable -- but arguably mundane -- manner.[/quote]

CSS 2规范：https://www.w3.org/TR/CSS21/cascade.html#cascade
[quote]Conforming user agents must apply a default style sheet[/quote]

那么具体哪些元素有哪些默认的样式，可以通过浏览器的开发者工具查看。
[img]http://dl2.iteye.com/upload/attachment/0129/5946/99be5ade-7db6-3270-9db3-a3282ef65c9d.png[/img]

W3C规范的定义：
https://www.w3.org/TR/CSS2/sample.html
https://www.w3.org/TR/html5/rendering.html

开源代码：
Firefox: https://github.com/mozilla/gecko-dev/blob/master/layout/style/res/html.css
Safari: https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Chrome: https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css

[b]（2）样式重置 CSS Reset[/b]

将浏览器存在差别的默认样式全部覆写以达到统一。

Eric Meyer’s CSS Reset
[url=https://meyerweb.com/eric/tools/css/reset/]https://meyerweb.com/eric/tools/css/reset/[/url]

HTML5 Reset Stylesheet
[url=http://html5doctor.com/html-5-reset-stylesheet/]http://html5doctor.com/html-5-reset-stylesheet/[/url]

还有很多其他的解决方案。这种直接重置的方案有些暴力！

[b]（3）Normalize.css[/b]

在默认的HTML元素样式上提供了跨浏览器的高度一致性。

[url=https://github.com/necolas/normalize.css/]https://github.com/necolas/normalize.css/[/url]

Bootstrap 内置了 Normalize.css：
[url=https://getbootstrap.com/docs/3.3/css/#overview-normalize]https://getbootstrap.com/docs/3.3/css/#overview-normalize[/url]

[b]（4）其他[/b]

关于CSS Reset是有很多争议的，网上很多文章可以参考阅读。

No CSS Reset
https://snook.ca/archives/html_and_css/no_css_reset/
Should You Reset Your CSS?
https://www.webpagefx.com/blog/web-design/should-you-reset-your-css/
To CSS Reset or Not to CSS Reset
http://www.peachpit.com/blogs/blog.aspx?uk=To-CSS-Reset-or-Not-to-CSS-Reset
到底该不该用 CSS reset？
https://www.zhihu.com/question/23554164
关于 CSS Reset 那些事
https://segmentfault.com/a/1190000003021766