当设计给我们提供一张PSD的图片，从PSD转HTML的过程中，我们需要考虑布局以及在不同浏览器的兼容让我们的页面能够在不同的浏览器下都能够百分百的渲染成统一的HTML页面，但是因为不同的浏览器都有属于自己的一份默认CSS样式表（差别不是很大），所以我们都会在为自己的页面添加一份reset.CSS的重置样式，来为不同的浏览器下统一打下一个相同的“基础”，在这个过程中会损耗一定的时间大概是0.1秒，因为浏览器被渲染了两次，当然也有大师认为reset没有存在的必要，这里我就不提这个，我是站在需要的情况下来总结的。

CSS reset(CSS重置)的历史：

根据淘宝射雕的叙述，最早的一份CSS reset来自Tantek 的undohtml.css ，很简单的代码，Tantek 根据自己的需要，对浏览器的默认样式进行了一些重置。

其余一些有名的CSS reset如业界领袖Eric Meyer的reset ，或是Tripoli Reset 。

CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准，而这个基准更多的就是“清零”!如下面常见但事实上极不推荐的代码：

*{ margin:0; padding:0; }

不过大家在写一个简单的测试页面的时候可以暂时用一下，主要是快速不用写太多标签，注意只是测试暂时可以用一下，我们需要在以后的工作中随着经验的积累和阅读前辈的文章来总结出自己的一套方法，完善自己的知识体系。

下面是几个推荐给大家使用的reset.css样式，希望大家在使用的时候能够“按需索取”，去除不必要的，留下真正需要的，这样才能够在工作中进步成长。

代码一：

 1 /* 重置样式 start */
 2 /* 清除内外边距 */
 3 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural 
 4 elements 结构元素 */
 5 dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
 6 pre, /* text formatting elements 文本格式元素 */
 7 fieldset, lengend, button, input, textarea, /* form elements 表单元素 
 8 */
 9 th, td { /* table elements 表格元素 */
10 margin: 0;
11 padding: 0;
12 }
13 ol, ul {
14 margin: 0;
15 padding: 0;
16 list-style: none;
17 }
18 body, button, input, select, textarea {
19 font: 12px/1.5 "Microsoft Yahei", Helvetica Neue, Helvetica, 
20 STHeiTi, sans-serif;
21 }
22 a {
23 text-decoration: none;
24 }
25 h1, h2, h3, h4, h5, h6{ font-weight: normal;}
26 address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
27 
28 img,input{border:0 none;}
29 div,a{outline:none}
30 a{text-decoration:none;}
31 .clear{ clear:both}
32 .hide{ display:none}
33 /* 重置样式 end */
View Code

代码二：

 1 body,ul,li,p,h1,h2,h3,h4,h5,h6,img,br,hr,table,tr,td,dl,dt,dd,form {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 body {
 6     font-family: Arial,"微软雅黑";
 7     font-size: 12px;
 8     color: #434343;
 9 }
10 .clear {
11     clear: both;
12     font-size: 0px;
13 }
14 ul,li {
15     list-style: none;
16 }
17 img {
18     border: none;
19 }
20 /*一般链接*/
21 a {
22     text-decoration: none;
23     color: #555;
24 }
25 a: hover {
26     color: #3366ff;
27 }
View Code

代码三：

[css] view plain copy print?
@charset "utf-8";  
/* ------------------------------------------------------------ 
version :   1.0 
 author :   tongqian.zhang 
  email :   bbirdsky@163.com 
  create:   2013-05-10 
------------------------------------------------------------ */  
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre,  
dl, dt, dd, ul, ol, li, th, td, div, span, img,  
fieldset, lengend, button, input, select, textarea{margin: 0;padding: 0;}  
  
/* color & background */      
html{color:#000; background:#FFF;}  
  
/* font */  
body, button, input, select, textarea { /* for ie */  
    font: 12px/18px Arial, Verdana, Microsoft YaHei;  
}  
  
/* fix center */  
html,body {height: 100%;margin: 0 auto;}  
  
/* h1~h6 */  
h1 {font-size: 18px;}  
h2 {font-size: 16px;}  
h3 {font-size: 14px;}  
h4, h5, h6 {font-size: 100%;}  
  
/* a */  
a { text-decoration: none; }  
a:hover { text-decoration: underline; }  
  
/* list */  
ul,ol {list-style: none;}  
  
/* img border */  
fieldset,img{border: 0}  
  
/* table */  
table {border-collapse: collapse;border-spacing: 0;font:inherit;}  
  
/* margin */  
.alpha {margin-left: 0;}  
.omega {margin-right: 0;}  
  
/* float & clear */  
.left{float:left;}  
.right{float:right;}  
.clear {clear: both;display: block;}  
  
/* clearfix */  
.clearfix:after{content:".";display:block;}  
.clearfix{display:inline-table;}  
/* Hides from IE-mac */  
* html .clearfix{height:1%;}  
.clearfix{display:block;}  
/* End hide from IE-mac */  
*+html .clearfix{min-height:1%;}/* IE7 */
View Code

以上的主要内容来源：张鑫旭老师、忆风520、IT瘾

在看了他们的文章后我觉的有所收获，特别是张老师的博客，他的那篇关于reset样式博文让我有了一个大概的思路吧，当然评论中的网友也提出了自己的意见，非常精彩建议你也去看看。

好了总结就到这里，没有太多自己原创的内容，但这是自己的第一篇博文，感觉终于踏出了第一步，以后就不回头了……