CSS 默认样式、样式重置

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

（1）默认样式

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渲染效果：


Chrome52.png渲染效果：


Firefox59.png渲染效果：


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

CSS 1规范：https://www.w3.org/TR/CSS1/#basic-concepts

引用

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.

CSS 2规范：https://www.w3.org/TR/CSS21/cascade.html#cascade

引用

Conforming user agents must apply a default style sheet

那么具体哪些元素有哪些默认的样式，可以通过浏览器的开发者工具查看。


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

（2）样式重置 CSS Reset

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

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

HTML5 Reset Stylesheet
http://html5doctor.com/html-5-reset-stylesheet/

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

（3）Normalize.css

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

https://github.com/necolas/normalize.css/

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

（4）其他

关于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