Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
就如上面说的那样，Normalize.css加上注释仅有450行代码，因为它的功能是只对需要设置初始化的页面标签进行初始化，使每个浏览器默认样式显示一致。
Normalize.css现在已经被用于Bootstrap、Pure、GitHub、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架和网站上。
而所谓对需要设置初始化的元素是指，每个浏览器的元素默认样式都略有不同，即同一份样式表在不同的浏览器里显示会出现不同程度的变形，我们需要做一些工作，让我们的样式设计在几乎所有浏览器里都显示一致，这种工作的另一个名字就是——做兼容。不过normalize只实现样式上的兼容，比较多的是H5新标签的设定，js的兼容还是要在js做。
以下代码均来自normalize.css v7.0.0 ，我补充了一些中文翻译与标签说明
/**
* 1. Correct the line height in all browsers.
* 使默认行高在所有浏览器里保持一致
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
* 预防WP手机与iPhone手机屏幕方向改变时字体大小会自动调整
* 3. Remove the margin in all browsers (opinionated).
* 清除所有浏览器预设外边距
*/
html {
line-height: 1.15; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
* 设置H5新块元素标签能在IE9或以下版本下以块元素显示
*/
article,aside,footer,header,nav,section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
* 使h1标签能在section和article元素内显示正确的大小与外边距
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
* 这两个是H5新标签，用于设定图像标题与图像，
* 在某种特定情况下代替p与li标签，同样需要设置为块元素显示，这里是也是兼容IE9及以下浏览器
*/
figcaption,figure,main { /* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
* 为figure设定在IE8下正确显示的外边距
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
* box-sizing是CSS3新属性
* content-box -> border和padding不计算入width之内
* 为火狐浏览器能正确显示分割线hr
* 让分割线在IE下超出部分显示滚动条
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
* pre标签的一个常见应用就是用来表示计算机的源代码
* 为了该标签在所有浏览器里继承父级元素字体大小与字体大小的变化
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
* 去除a链接在IE10下显示的灰色背景
* 消除在IOS8+与Safari浏览器里下划线与a链接的间隔
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
* abbr标签表缩写
* 去除在谷歌浏览器5.7版本以下和火狐3.9版本以下显示的下边框
* 为webkit内核的浏览器与IE，Opera浏览器显示正确的下划线
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
* 避免在Safari6下重复添加文本加粗样式
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
* 为b和strong标签设置一致的字体粗细 bolder(加粗)
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
* 这里也是为了让code,kbd,samp标签字体大小能跟随默认字体大小，字体设置为等宽字体
*/
code,kbd,samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font style in Android 4.3-.
* 为安卓4.3以下dfn标签设置倾斜字体样式
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
* 在IE9以下浏览器能显示mark标签高亮的颜色
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
* 设置small标签内字体为默认字体大小的80%
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
* sub上标，sup下标
* 字体大小为父级元素字体大小的75%，行高设置为不占行高，定位设置为相对定位，
* 水平对齐方式为基线对齐
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 在IE9及以下audio与video标签以行内块显示
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
* 在iOS4-7隐藏控制条
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
* 为IE10及以下移除图片的边框
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
* 如果svg元素不是直接在根元素html上时，超出部分隐藏
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
* 设置字体大小统一为默认字体大小，行高为默认行高的1.15倍
* 外边距为0
*/
button,input,optgroup,select,textarea {
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
* 使input与button标签超出部分可见
*/
button,input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
* 移除在火狐与IE中本文转变大小写的继承
* 不转变标签内本文的大小写
*/
button,select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
* 为了避免webkit的漏洞破坏audio与video的控制条在安卓4版本的显示
* 修复IOS与Safari下不能点击的问题
*/
button,html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
* 移除火狐浏览器预设的边框与内边距
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
* 修复被选中时的样式
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
* fieldset标签将表单内容的一部分打包，生成一组相关表单的字段
* 修改火狐浏览器的内边距
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
* legend 元素为 fieldset元素定义标题（caption）
* border-box -> border和padding计算入width之内
* white-space换行模式，normal则空白会被浏览器忽略
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
* 进度条以行内块样式进行显示，垂直对齐方式为基线对齐
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
* 移除IE默认的本文输入框滚动条
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
* 单选复选框的边框和内边距计算入元素宽度之内
* 内边距设置为0
*/
[type="checkbox"],[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
* 修正在谷歌浏览器下的鼠标在按键中的位移量
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
* 修改谷歌与Safari浏览器的旧样式
* outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
* 为Safari浏览器修改outline样式
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
* 移除谷歌与Safari浏览器在macOS系统下的默认内边距与取消按钮
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
* 修复按钮在IOS与Safari浏览器下无法点击
* 改变在Safari浏览器下的字体继承
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
* 设置details与menu标签为块元素显示
*/
details, /* 1 */
menu {
display: block;
}
/*
* Add the correct display in all browsers.
* summary标签为details标签里的标题
* display: list-item表示此元素会作为列表显示
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
* 在IE9及以下canvas画布以行内块元素显示
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
* template元素是一种用于保存客户端内容的机制，该内容在页面加载时不被渲染，
* 但可以在运行时使用JavaScript进行实例化。所以先隐藏
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
* 为IE10及以下添加隐藏属性
*/
[hidden] {
display: none;
}
总结
以上就是Normalize.css的全部代码，我们可以很方便得在项目中引入它，我们也可以根据自己的需要对它进行删改，实现高度定制化。比如一些我们没有用上的H5新标签是没有必要做兼容的。
最后，感谢原作者，他们不仅方便了我们的工作，还给我们上了一课。
