Normalize.css作了哪些事情--看代碼

博主說:本博客文章來源包括轉載,翻譯,原創,且在文章內均有標明。鼓勵原創,支持創做共享,請勿用於商業用途,轉載請註明文章連接。本文連接:http://www.kein.pw/?p=80css

/*! normalize.css v2.1.2 | MIT License | git.io/normalize */html

/* ==========================================================================
HTML5新標籤display屬性定義
========================================================================== */git

/**
* 爲 IE 8/9定義新的塊狀元素.
*/web

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}canvas

/**
*爲 IE 8/9定義新的inline-block元素.
*/瀏覽器

audio,
canvas,
video {
display: inline-block;
}app

/**
* 防止現代瀏覽器在顯示audio的時候沒有控制條
* 移除在iOS5設備中多出的高度
*/ide

audio:not([controls]) {
display: none;
height: 0;
}svg

/**
* 修正IE 8/9不支持的屬性
*/字體

[hidden] {
display: none;
}

/* ==========================================================================
Base
========================================================================== */

/**
* 1. 設置默認字體爲 sans-serif.
* 2. 組織iOS方向變化後的字體調整,但不由止用戶縮放.
*/

html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}

/**
* 移除默認外邊距.
*/

body {
margin: 0;
}

/* ==========================================================================
Links
========================================================================== */

/**
* 統一全部瀏覽器的連接焦點虛線框.
*/

a:focus {
outline: thin dotted;
}

/**
*提高全部瀏覽器中連接焦點和鼠標劃事後的可讀性
*/

a:active,
a:hover {
outline: 0;
}

/* ==========================================================================
Typography
========================================================================== */

/**
* 統一h1在不一樣瀏覽器中具備不一樣的字號和外邊距 Firefox 4+, Safari 5, and Chrome.
*/

h1 {
font-size: 2em;
margin: 0.67em 0;
}

/**
* 修正不支持的屬性 IE 8/9, Safari 5, and Chrome.
*/

abbr[title] {
border-bottom: 1px dotted;
}

/**
* 修正b,strong的加粗樣式爲bold in Firefox 4+, Safari 5, and Chrome.
*/

b,
strong {
font-weight: bold;
}

/**
* 修正不支持屬性 in Safari 5 and Chrome.
*/

dfn {
font-style: italic;
}

/**
* 統一火狐與其它瀏覽器的樣式
*/

hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}

/**
* 修正不支持屬性 in IE 8/9.
*/

mark {
background: #ff0;
color: #000;
}

/**
* 修正奇葩字體設定 in Safari 5 and Chrome.
*/

code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}

/**
* 提高全部瀏覽器的可讀性.
*/

pre {
white-space: pre-wrap;
}

/**
* 設置一致的樣式.
*/

q {
quotes: "\201C" "\201D" "\2018" "\2019";
}

/**
* 統一全部瀏覽器字號.
*/

small {
font-size: 80%;
}

/**
*消除 `sub` 和`sup`對 `line-height` 的影響 all browsers.
*/

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sup {
top: -0.5em;
}

sub {
bottom: -0.25em;
}

/* ==========================================================================
Embedded content
========================================================================== */

/**
*移除邊框 in IE 8/9.
*/

img {
border: 0;
}

/**
*修正顯示怪異 in IE 9.
*/

svg:not(:root) {
overflow: hidden;
}

/* ==========================================================================
Figures
========================================================================== */

/**
* 修正不支持屬性 IE 8/9 and Safari 5.
*/

figure {
margin: 0;
}

/* ==========================================================================
Forms
========================================================================== */

/**
* 定義一致的邊框,外邊距,內邊距 border, margin, and padding.
*/

fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}

/**
* 1.修正color沒有繼承 in IE 8/9.
* 2.移除內邊距,防止屬性歸零時不出紕漏
*/

legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}

/**
* 1. 修正字體不能繼承 in all browsers.
* 2.修正字號不能繼承 in all browsers.
* 3. 統一不一樣的外邊距 in Firefox 4+, Safari 5, and Chrome.
*/

button,
input,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
}

/**
* 修正 Firefox 4+ 默認的!important設置
*/

button,
input {
line-height: normal;
}

/**
* 修正`button` 和`select`的text-transform屬性遺傳不一致
* 全部其餘form控制元素不繼承 `text-transform` 的值.
* 修正 `button`樣式遺傳 in Chrome, Safari 5+, and IE 8+.
* 修正`select` 樣式遺傳 in Firefox 4+ and Opera.
*/

button,
select {
text-transform: none;
}

/**
* 1. 避開 WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. 修正iOs中沒法給可點擊的input添加樣式的問題
* 3. 提升type屬性爲image的input元素鼠標指針的可用性和一致性
*/

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}

/**
* 重置不可操做元素的默認鼠標指針
*/

button[disabled],
html input[disabled] {
cursor: default;
}

/**
* 1.修正type屬性爲 `content-box`的box-sizing樣式 in IE 8/9.
* 2. 移除多餘的padding in IE 8/9.
*/

input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}

/**
* 1. 修正搜索框的 `appearance` 屬性in Safari 5 and Chrome.
* 2.修正 `box-sizing` 屬性 `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/

input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}

/**
*移除內邊距和取消搜索按鈕in Safari 5 and Chrome
* on OS X.
*/

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

/**
* 移除邊框和內邊距in Firefox 4+.
*/

button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}

/**
* 1.移除默認的豎向滾動條 in IE 8/9.
* 2.提升可讀性和對齊 in all browsers.
*/

textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}

/* ==========================================================================
Tables
========================================================================== */

/**
* 移除大多數單元格中的的空格.
*/

table { border-collapse: collapse; border-spacing: 0; }

相關文章
相關標籤/搜索