CSS 重置默认样式

2023-02-07 12:30:34

1. 概述

1.1 说明

css重置样式主要是为了让各个浏览器的CSS样式有一个统一的基准，使HTML元素样式在跨浏览器时有一致性的效果。

备注：浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果不对css初始化往往会出现浏览器之间的页面显示差异。但是初始化样式也会对SEO有一定的影响，故初始化时尽量使影响最小。

1.2 重置文件

reset.css：传统的重置样式文件，重置清零处理来保障统一基准，如(*{ margin:0; padding:0; })。

normailze.css：是一个很小的css，是一种为HTML5准备的优质重置方案(替代reset.css)。(https://necolas.github.io/normalize.css/5.0.0/normalize.css)。

1.2.1 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的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易的进行自己的测试。

2. 重置详情

2.1 reset.css

@charset "utf-8";

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,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

    margin:;

    padding:;

    border:;

    outline:;

    font-size: 100%;

    /*background: transparent;*/

}

table {

    border-collapse:collapse;

    border-spacing:;

}

fieldset, img {    border:;}

address, caption, cite, code, dfn, em, strong, th, var {

    font-style:normal;

    font-weight:normal;

}

ol, ul { list-style:none; }

caption, th { text-align:left; }

h1, h2, h3, h4, h5, h6 {

    font-size:200%;

    font-weight:normal;

}

:focus { outline:;}

a{ text-decoration:none;}

a:hover img{ border:none;}

a:active{noOutline:expression(this.onFocus=this.blur());}

/*清除浮动*/

.clearfix:after {

    content: ".";

    display: block;

    height:;

    clear: both;

    visibility: hidden;

}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/

* html .clearfix { height: 1%;}

.clearfix {display: block;}

/* End hide from IE-mac */

/*png css hack for ie6*/

*html img.png{

    _background-image: expression(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "http://i0.itc.cn/20101019/848_0a785a7b_1118_4825_85dc_e8696988c94b_0.gif");

}

2.2 normalize.css

Normalize.css 在GitHub上的源码
可进行模块引入normalize.css
直接引入normalize.css文件内容

码农公寓