normalize.css

元信息

• 目标：认识浏览器默认样式的存在与跨浏览器差异，理解"基础样式不一致则级联结果不确定"，从而明白为何工程上默认引入 normalize.css 抹平基础
• 关键概念：默认样式、级联规则、样式重置、reset css、normalize.css
• 关联阶段：cp1
• 常见误区：以为不写 CSS 的页面就"没有样式"（浏览器始终有默认渲染规则）；以为同一份 CSS 在各浏览器渲染结果天然一致

没有CSS的世界会怎样?

既使不给予CSS代码，浏览器依然会对HTML文档中各类元素进行渲染，不同的浏览器(chrome/firefox/ie)则默认可能会给予不同的样式

• 默认的文字及标题的字号？16px;14px...？
• 列表如何显示？是有缩进还是无缩进？缩进的程度？
• 表格如何显示？表格单元是大间距还是小间距？有无边框线？
• ...

如何改变浏览器如chrome的默认样式

• 找到 Chrome 浏览器安装目录下的 Custom.css 样式文件（此文件默认为空）,譬如C:\Users\系统用户名\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\
• 添加代码,覆盖浏览器的默认样式.注意优先级的问题,可能需要用到!important之类的指令

兼容性问题

• 为网页指定同一个样式文件，在不同的浏览器中渲染，可能会存在差异
• 为了设计跨浏览器兼容的页面样式，设计师需要了解各个浏览器的默认设置
• 设计师在设计一些通用的样式规则库(如bootstrap等)时，希望能有一个共同的、一致的样式基础，以便于协作和共享

上述兼容性问题产生的原因，其实源于CSS的级联规则特性。从前面学习我们已经知道，如果一篇网页指定有多个样式，则样式采用级联规则来决定最终的样式属性的值，没有被覆盖的样式属性会继承默认的来自上一层如浏览器的样式属性。因此，如果基础的样式不一致，则最终的样式会产生不确定性。

CSS的级联特性，能够帮助开发者共享样式代码，减少工作量，但同时也引入了复杂性和不确定性。现代Web开发者正在设计各种工具，譬如css modules、css-in-js等，以试图消除级联的副作用。

统一的基础样式：reset css

基于上述的问题和需求，为了便 于的样式的书写，WEB社区推出了样式重置的标准化，即所谓reset css,其中 normalize.css 是当前社区的主流样式基础库，也是我们后面编写样式是应当默认包含的样式基础库，也是入门学习时的一个不错的示例

参考

• reset css https://cssreset.com/what-is-a-css-reset/
• w3c规定的预设值 https://www.w3.org/TR/CSS21/sample.html
• 社区通用的默认样式 https://github.com/necolas/normalize.css/
  • https://csstools.github.io/normalize.css/11.0.0/normalize.css
  • normalize css的用途 http://zhibu.cnblogs.com/p/5176838.html
  • 与reset css 的区别 https://segmentfault.com/a/1190000002239676