Normalize.css重置化样式表
Normalize.css重置化样式表
创造normalize.css有下⾯这⼏个⽬的：
保护有⽤的浏览器默认样式⽽不是完全去掉它们
⼀般化的样式：为⼤部分HTML元素提供
修复浏览器⾃⾝的bug并保证各浏览器的⼀致性
优化CSS可⽤性：⽤⼀些⼩技巧
解释代码：⽤注释和详细的⽂档来
Normalize.css⽀持包括⼿机浏览器在内的超多浏览器，同时对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的代码基于详细⽽全⾯的跨浏览器研究与测试。这个⽂件中拥有详细的代码说明并在中有进⼀步的说明。这意味着你可以到每⼀⾏代码具体完成了什么⼯作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进⾏⾃⼰的测试。
如何使⽤ normalize.css
⾸先，安装或从Github，接下来有两种主要途径去使⽤它。
策略⼀：将normalize.css作为你⾃⼰项⽬的基础CSS，⾃定义样式值以满⾜设计师的需求。
策略⼆：引⼊normalize.css源码并在此基础上构建，在必要的时候⽤你⾃⼰写的CSS覆盖默认值。
/*! normalize.css v8.0.1 | MIT License | github/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 semantics5分钟前兰州地震了
========================================================================== */ /**
* 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.
abac式的词语大全*/
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;
}
.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。