CSS reset

 前面的話

　　大部分的時候，做爲前端，咱們在寫 CSS 樣式以前，須要添加一份 reset.css 。CSS reset不只用於清除默認樣式，更是一種全局樣式定義。若是項目前期不定製好CSS reset，後期維護階段再對其進行修改，將會牽一髮而動全身。本文將詳細介紹CSS reset

 

reset

　　以網易NEC的CSS reset爲例，來進行說明

/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}

　　下面來講明CSS reset的問題

　　一、不合理的樣式重置

　　例如， html、div 、dt等標籤是沒有默認 padding 和 margin 的

　　二、生僻標籤的樣式重置

　　例如，fieldset 、blockquote、q等標籤用的較少，用到時，再進行樣式設置便可

　　三、性能負擔

　　CSS reset 一般會增長瀏覽器進行樣式計算的成本（即有必定的性能負擔），由於它引入了許多的針對元素的全局規則，網頁中幾乎全部元素都會匹配一條乃至幾條的reset規則，且每每規則中的屬性設定其實會被更特殊的規則所覆蓋（好比padding和margin）。極端狀況下，可能某條reset規則中的全部屬性設置實際上並無在任何元素上生效（由於所有被更特殊的規則給覆蓋了），全部針對此規則的級聯計算全都是浪費

　　基於這些問題，下面是修改版的CSS reset

body{margin: 0; font: 12px/22px Arial,"微軟雅黑"; color: #333;}
header,footer,section,article,aside,nav,figure{display:block}

ul,ol{margin: 0;padding: 0;list-style: none;}
p,dl,dd{margin: 0;}
h1,h2,h3,h4{margin: 0;font-size: 100%;}

img{border:none;}
a{color: #21a557;cursor: pointer; text-decoration: none; }
a:active,a:hover{outline：none;}
a:hover{text-decoration: underline;}

strong{font-weight:normal;}
em,i{font-style:normal;}

table{border-collapse: collapse; table-layout: fixed;border-spacing:0;}
th,td{padding: 0;}
button,input{box-sizing: border-box;padding: 0;border: none;background: none;}

 

Normalize

　　Normalize.css 與 reset.css 的風格剛好相反，注重通用的方案，重置掉該重置的樣式（例如body的默認margin），保留該保留的 user agent 樣式，同時進行一些 bug 的修復，這點是 reset 所缺少的。Normalize不講求樣式一致，而講求通用性和可維護性

html {
  /*統一行高*/
  line-height: 1.15;
  /*防止在winPhone和ISO中，因旋轉屏幕而形成的字體大小的改變*/
  -ms-text-size-adjust: 100%; 
  -webkit-text-size-adjust: 100%; 
}

body {
  /*去除margin*/
  margin: 0;
}

article,aside,footer,header,nav,section,figcaption,figure,main{
  /*重置IE8-瀏覽器的display*/
  display: block;
}

h1 {
  /*統一字體大小及margin*/
  font-size: 2em;
  margin: 0.67em 0;
}

figure {
  /*重置IE8瀏覽器的margin*/
  margin: 1em 40px;
}

hr {
  /*重置firefox瀏覽器的box-sizing*/
  box-sizing: content-box; 
  height: 0; 
  /*重置IE瀏覽器的overflow*/
  overflow: visible; 
}

pre {
  /*統一字體大小及字體系統*/
  font-family: monospace, monospace; 
  font-size: 1em; 
}

a {
  /*移除IE10中的灰色背景*/
  background-color: transparent; 
  -webkit-text-decoration-skip: objects; 
}

abbr[title] {
  /*移除Chrome57- and Firefox 39-中的border-bottom*/ 
  border-bottom: none; 
  /*統一text*/-decoration
  text-decoration: underline; 
  text-decoration: underline dotted; 
}

b,strong {
  /*統一字體重量*/
  font-weight: bolder;
}

code,kbd,samp {
  /*統一字體系列及字體大小*/
  font-family: monospace, monospace; 
  font-size: 1em; 
}

dfn {
  /*重置Android4.3-瀏覽器的字體樣式*/ 
  font-style: italic;
}

mark {
  /*重置IE8-瀏覽器的背景顏色及文本顏色*/ 
  background-color: #ff0;
  color: #000;
}

small {
  /*統一字體大小*/
  font-size: 80%;
}

sub,sup {
  /*去除sub、sup對行高的影響*/
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  /*統一位置*/
  bottom: -0.25em;
}

sup {
  /*統一位置*/
  top: -0.5em;
}

audio,video {
  /*重置IE8-瀏覽器的display    */
  display: inline-block;
}

audio:not([controls]) {
  /*重置iOS 4-7中的display及height*/
  display: none;
  height: 0;
}

img {
  /*重置IE9-瀏覽器的border-style*/
  border-style: none;
}

svg:not(:root) {
  /*重置IE瀏覽器中的overflow*/
  overflow: hidden;
}

button,input,optgroup,select,textarea {
  /*統同樣式*/
  /*移除Firefox and Safari中的margin*/
  font-family: sans-serif; 
  font-size: 100%; 
  line-height: 1.15; 
  margin: 0; 
}

button,input { 
  /*重置IE瀏覽器中的overflow*/
  overflow: visible;
}

button,select { 
  /*重置firefox瀏覽器中的text-transform*/
  text-transform: none;
}

button,html [type="button"], [type="reset"],[type="submit"] {
  /*重置webkit瀏覽器的appearance屬性*/
  -webkit-appearance: button; 
}

button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {
  /*重置firefox瀏覽器中的border和padding*/
  border-style: none;
  padding: 0;
}

button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {
  /*統一outline*/ 
  outline: 1px dotted ButtonText;
}

fieldset {
  /*重置firefox瀏覽器的padding*/
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box; 
  color: inherit; 
  display: table; 
  max-width: 100%; 
  padding: 0; 
  white-space: normal; 
}

progress {
  /*重置IE9-瀏覽器的display*/
  display: inline-block; 
  /*重置Chrome*/, Firefox瀏覽器的vertical-align
  vertical-align: baseline; 
}
textarea {
  /*移除IE瀏覽器中默認的垂直滾動條*/
  overflow: auto;
}

[type="checkbox"],[type="radio"] {
  /*重置IE9-瀏覽器的box-sizing及padding    */
  box-sizing: border-box; 
  padding: 0; 
}

[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {
  /*修正Chrome中增長和減量按鈕的光標樣式*/
  height: auto;
}

[type="search"] {
  /*重置Chrome and Safari的appearance和outline-offset*/
  -webkit-appearance: textfield; 
  outline-offset: -2px; 
}

[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration {
  /*在macOS上刪除Chrome和Safari中的內填充和取消按鈕。*/
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  /*在iOS和Safari中，糾正沒法點擊的類型。*/
  -webkit-appearance: button; 
  font: inherit; 
}

details, menu {
  /*重置IE8-瀏覽器的display*/
  display: block;
}

summary {
  /*統一display*/
  display: list-item;
}

canvas {
  /*重置IE8-瀏覽器的display*/
  display: inline-block;
}

template {
  /*重置IE瀏覽器的display*/    
  display: none;
}

[hidden] {
  /*重置IE9-瀏覽器的display    */
  display: none;
}

 

使用

　　是否 Normalize.css 就真的比 reset.css 好呢？

　　也不見得，Normalize.css 中重置修復的不少 bug ，其實在咱們的項目中十個項目不見得有一個會用得上，那麼這些重置或者修復，某種意義上而言也是所謂的冗餘代碼

　　因此，應該根據項目須要，混合部分 reset 或者 normalize，編寫了一份適合團隊項目的 reset ，作出取捨微調，適量裁剪和修改後再使用

　　對於通常項目而言，在調用normalize.css以後，再根據實際狀況，編寫reset.css。固然，這個reset並非將樣式清空，而是設置樣式的默認值及經常使用的工具樣式

html{
    /*這樣，1rem=100px，方便後續計算，不設置爲10px是由於chrome下最小字體大小爲12px*/
    font-size:100px;
}
body{
    /*設置爲12px*/
    font-size: 0.12rem;
    line-height: 1.5;
    /*不使用純黑色#000，下降頁面對比度*/
    color:#222;
}
a{
    color:#666;
    text-decoration:none;
}
a:hover,a:active{
    color:#0ae;
    text-decoration: underline;
}
::selection{
    background-color: #b3d4fc;
    text-shadow:none;
}
ul{
    margin: 0;
    padding: 0;
    list-style:none;
}
.fl{float: left;}
.fr{float: right;}
.clear:after{content:""; display: block; clear: both;}
.clear{zoom:1;}
/*低版本瀏覽器提示*/
.browserupgrade{
    margin:0;
    padding:1rem;
    background-color: #ccc;
}