文章出處

 前面的話

　　大部分的時候，作為前端，我們在寫 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的問題

　　1、不合理的樣式重置

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

　　2、生僻標簽的樣式重置

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

　　3、性能負擔

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

 


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄