normalize.css收藏

目前GitHub上比較火的一個樣式重置的css
項目地址[:https://github.com/necolas/normalize.css/blob/master/normalize.css]

(https://github.com/necolas/normalize.css/blob/master/normalize.css)

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css *//* Document========================================================================== *//*** 1. Correct the line height in all browsers.* 2. Prevent adjustments of font size after orientation changes in iOS.*/html {line-height: 1.15; /* 1 */-webkit-text-size-adjust: 100%; /* 2 */ }/* Sections========================================================================== *//*** Remove the margin in all browsers.*/body {margin: 0; }/*** Render the `main` element consistently in IE.*/main {display: block; }/*** Correct the font size and margin on `h1` elements within `section` and* `article` contexts in Chrome, Firefox, and Safari.*/h1 {font-size: 2em;margin: 0.67em 0; }/* Grouping content========================================================================== *//*** 1. Add the correct box sizing in Firefox.* 2. Show the overflow in Edge and 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 {font-family: monospace, monospace; /* 1 */font-size: 1em; /* 2 */ }/* Text-level semantics========================================================================== *//*** Remove the gray background on active links in IE 10.*/a {background-color: transparent; }/*** 1. Remove the bottom border in Chrome 57-* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.*/abbr[title] {border-bottom: none; /* 1 */text-decoration: underline; /* 2 */text-decoration: underline dotted; /* 2 */ }/*** Add the correct font weight in Chrome, Edge, and Safari.*/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 {font-family: monospace, monospace; /* 1 */font-size: 1em; /* 2 */ }/*** Add the correct font size in all browsers.*/small {font-size: 80%; }/*** Prevent `sub` and `sup` elements from affecting the line height in* all browsers.*/sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline; }sub {bottom: -0.25em; }sup {top: -0.5em; }/* Embedded content========================================================================== *//*** Remove the border on images inside links in IE 10.*/img {border-style: none; }/* Forms========================================================================== *//*** 1. Change the font styles in all browsers.* 2. Remove the margin in Firefox and Safari.*/button, input, optgroup, select, textarea {font-family: inherit; /* 1 */font-size: 100%; /* 1 */line-height: 1.15; /* 1 */margin: 0; /* 2 */ }/*** Show the overflow in IE.* 1. Show the overflow in Edge.*/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.*/button, select { /* 1 */text-transform: none; }/*** Correct the inability to style clickable types in iOS and Safari.*/button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button; }/*** 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 {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 {box-sizing: border-box; /* 1 */color: inherit; /* 2 */display: table; /* 1 */max-width: 100%; /* 1 */padding: 0; /* 3 */white-space: normal; /* 1 */ }/*** Add the correct vertical alignment in Chrome, Firefox, and Opera.*/progress {vertical-align: baseline; }/*** Remove the default vertical scrollbar in IE 10+.*/textarea {overflow: auto; }/*** 1. Add the correct box sizing in IE 10.* 2. Remove the padding in IE 10.*/[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.*/[type="search"] {-webkit-appearance: textfield; /* 1 */outline-offset: -2px; /* 2 */ }/*** Remove the inner padding in Chrome and Safari on macOS.*/[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.*/::-webkit-file-upload-button {-webkit-appearance: button; /* 1 */font: inherit; /* 2 */ }/* Interactive========================================================================== *//** Add the correct display in Edge, IE 10+, and Firefox.*/details {display: block; }/** Add the correct display in all browsers.*/summary {display: list-item; }/* Misc========================================================================== *//*** Add the correct display in IE 10+.*/template {display: none; }/*** Add the correct display in IE 10.*/[hidden] {display: none; }

特點:

以下文字引用至:原文鏈接

Normalize.css只是一個很小的css文件，但它在磨人的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統的CSS reset,Normalize.css是一種現代的、為HTML5準備的優質替代方案。總之，Normalize.css是一種CSS reset的替代方案。

我們創造normalize.css有下面這幾個目的：

保護有用的瀏覽器樣式而不是去掉他們。

一般化的樣式：為大部分HTML元素提供。

修復瀏覽器自身的bug并保證各瀏覽器的一致性。

優化css可用性：用一些小技巧。

解釋代碼：用注釋和詳細的文檔來。

注意：Normalize支持包括手機瀏覽器在內的超多瀏覽器，同時對HTML5元素、排版、列表、嵌入的內容、表單和表哥都進行了一般化。盡管這個項目基于一般化的原則，但我們還是在合適的地方使用了更實用的默認值。

Normalize vs Reset

1. Normalize.css 保護了有價值的默認值:
Reset通過為幾乎所有的元素施加默認樣式，強行使得元素有相同的視覺效果。相比之下，Normalize.css保持了許多磨人的瀏覽器樣式。這就意味著你不用再為所有公共的排版元素重新設置樣式。當一個元素在不同的瀏覽器中有不同的默認值時，Normalize.css會力求讓這些樣式保持一致并盡可能與現代標準符合。

2. Normalize.css 修復了瀏覽器的bug:
它修復了常見的桌面端與移動端瀏覽器的bug。這往往超出了Reset所能做到的范圍。關于這一點，Normalize.css修復的問題包含了HTML5元素的顯示設置、預格式化文字的font-size問題、在IE9中SVG的溢出、許多出現在各瀏覽器和操作系統中的與表單相關的bug。

3. Normalize.css 不會讓你的調試工具變的雜亂:
使用Reset最讓人困擾的地方莫過于在瀏覽器調試工具中大段大段的繼承鏈，在Normalize.css中就不會有這樣的問題，因為在我們的準則中對多選擇器的使用是非常謹慎的，我們僅會有目的地對目標元素設置樣式。

4. Normalize.css 是模塊化的:
這個項目已經被拆分為多個相關卻又獨立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠不會用到的部分（比如表單的一般化）。

5. Normalize.css 擁有詳細的文檔:
Normalize.css的代碼基于詳細而全面的跨瀏覽器研究與測試。這個文件中擁有詳細的代碼說明并在Github Wiki中有進一步的說明。這意味著你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、瀏覽器之間的差異，并且你可以更容易的進行自己的測試。

總結

以上是生活随笔為你收集整理的normalize.css的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。