HTML5 重置樣式 normalize.css

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}

/* Document
========================================================================== */

/**

    1. Correct the line height in all browsers.
    1. Prevent adjustments of font size after orientation changes in
  • IE on Windows Phone and in iOS.
    */

html {
line-height: 1.15; /* 1 /
-ms-text-size-adjust: 100%; /
2 /
-webkit-text-size-adjust: 100%; /
2 */
}

/* Sections
========================================================================== */

/**

  • Remove the margin in all browsers (opinionated).
    */

body {
margin: 0;
}

/**

  • Add the correct display in IE 9-.
    */

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 {
font-size: 2em;
margin: 0.67em 0;
}

/* Grouping content
========================================================================== */

/**

  • Add the correct display in IE 9-.
    1. Add the correct display in IE.
      */

figcaption,
figure,
main { /* 1 */
display: block;
}

/**

  • Add the correct margin in IE 8.
    */

figure {
margin: 1em 40px;
}

/**

    1. Add the correct box sizing in Firefox.
    1. 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.
    1. Correct the odd em font sizing in all browsers.
      */

pre {
font-family: monospace, monospace; /* 1 /
font-size: 1em; /
2 */
}

/* Text-level semantics
========================================================================== */

/**

    1. Remove the gray background on active links in IE 10.
    1. Remove gaps in links underline in iOS 8+ and Safari 8+.
      */

a {
background-color: transparent; /* 1 /
-webkit-text-decoration-skip: objects; /
2 */
}

/**

    1. Remove the bottom border in Chrome 57- and Firefox 39-.
    1. 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 */
}

/**

  • Prevent the duplicate application of bolder by the next rule in Safari 6.
    */

b,
strong {
font-weight: inherit;
}

/**

  • 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.
    1. 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 style in Android 4.3-.
    */

dfn {
font-style: italic;
}

/**

  • Add the correct background and color in IE 9-.
    */

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

/**

  • 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
========================================================================== */

/**

  • Add the correct display in IE 9-.
    */

audio,
video {
display: inline-block;
}

/**

  • Add the correct display in iOS 4-7.
    */

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

/**

  • Remove the border on images inside links in IE 10-.
    */

img {
border-style: none;
}

/**

  • Hide the overflow in IE.
    */

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

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

/**

    1. Change the font styles in all browsers (opinionated).
    1. Remove the margin in Firefox and Safari.
      */

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.
      */

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;
}

/**

    1. Prevent a WebKit bug where (2) destroys native audio and video
  • controls in Android 4.
    1. Correct the inability to style clickable types in iOS and 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 {
padding: 0.35em 0.75em 0.625em;
}

/**

    1. Correct the text wrapping in Edge and IE.
    1. Correct the color inheritance from fieldset elements in IE.
    1. 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 */
}

/**

    1. Add the correct display in IE 9-.
    1. 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.
    */

textarea {
overflow: auto;
}

/**

    1. Add the correct box sizing in IE 10-.
    1. 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-outer-spin-button {
height: auto;
}

/**

    1. Correct the odd appearance in Chrome and Safari.
    1. Correct the outline style in Safari.
      */

type="search" {
-webkit-appearance: textfield; /* 1 /
outline-offset: -2px; /
2 */
}

/**

  • Remove the inner padding and cancel buttons 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.
    1. Change font properties to inherit in 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, /* 1 */
menu {
display: block;
}

/*

  • Add the correct display in all browsers.
    */

summary {
display: list-item;
}

/* Scripting
========================================================================== */

/**

  • Add the correct display in IE 9-.
    */

canvas {
display: inline-block;
}

/**

  • Add the correct display in IE.
    */

template {
display: none;
}

/* Hidden
========================================================================== */

/**

  • Add the correct display in IE 10-.
    */

[hidden] {
display: none;
}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末堡纬,一起剝皮案震驚了整個(gè)濱河市聂受,隨后出現(xiàn)的幾起案子蒿秦,更是在濱河造成了極大的恐慌烤镐,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,252評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件棍鳖,死亡現(xiàn)場(chǎng)離奇詭異炮叶,居然都是意外死亡碗旅,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,886評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)镜悉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)祟辟,“玉大人,你說(shuō)我怎么就攤上這事侣肄【衫В” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,814評(píng)論 0 361
  • 文/不壞的土叔 我叫張陵稼锅,是天一觀的道長(zhǎng)吼具。 經(jīng)常有香客問(wèn)我,道長(zhǎng)矩距,這世上最難降的妖魔是什么拗盒? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,869評(píng)論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮锥债,結(jié)果婚禮上陡蝇,老公的妹妹穿的比我還像新娘。我一直安慰自己哮肚,他們只是感情好登夫,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,888評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著绽左,像睡著了一般悼嫉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上拼窥,一...
    開(kāi)封第一講書(shū)人閱讀 52,475評(píng)論 1 312
  • 那天戏蔑,我揣著相機(jī)與錄音,去河邊找鬼鲁纠。 笑死总棵,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的改含。 我是一名探鬼主播情龄,決...
    沈念sama閱讀 41,010評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼捍壤!你這毒婦竟也來(lái)了骤视?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,924評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤鹃觉,失蹤者是張志新(化名)和其女友劉穎专酗,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體盗扇,經(jīng)...
    沈念sama閱讀 46,469評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡祷肯,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,552評(píng)論 3 342
  • 正文 我和宋清朗相戀三年沉填,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片佑笋。...
    茶點(diǎn)故事閱讀 40,680評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡翼闹,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蒋纬,到底是詐尸還是另有隱情猎荠,我是刑警寧澤,帶...
    沈念sama閱讀 36,362評(píng)論 5 351
  • 正文 年R本政府宣布蜀备,位于F島的核電站法牲,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏琼掠。R本人自食惡果不足惜拒垃,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,037評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望瓷蛙。 院中可真熱鬧悼瓮,春花似錦、人聲如沸艰猬。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,519評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)冠桃。三九已至命贴,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間食听,已是汗流浹背胸蛛。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,621評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留樱报,地道東北人葬项。 一個(gè)月前我還...
    沈念sama閱讀 49,099評(píng)論 3 378
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像迹蛤,于是被迫代替她去往敵國(guó)和親民珍。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,691評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容