首页 > > 网页制作 > css >

CSS reset

2018-06-24 01:32:15来源：未知阅读 ()

前面的话

　　大部分的时候，作为前端，我们在写 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;
}