记得刚开始学XHTML+CSS时，班里同学经常被各种bug折腾，那是苦不堪言啊！当然我也在内的了。(PS:这里说XHTML+CSS的话，可能很多看官会感觉陌生，如果说是DIV+CSS的话，我想熟悉度要立即提升90%。)直到后来我们知道有这么个万能的东东--*{margin:0;padding:0}，爷爷再也不用担心我的学习啦！至于效果嘛，那是谁用谁知道啊！好评犹如长江之水滔滔不绝,又如黄河泛滥一发不可收拾！

那么问题来了，上面说的*{margin:0;padding:0}究竟是什么东东呢？这就是最早期我们使用的CSS Reset，也就是我们常说的样式重置。(PS:至于详细且严谨的说明请自行网上搜索)那么使用这个东东到底有什么好处呢？为什么可以大大的减少我们在排版页面中的问题呢？这个得一步二步的说起。

对正则表达式有过了解的看官都知道*是一个通配符，可以理解为所有。也就是说，上面这行代码表示：将页面中的所有元素的margin(外补白)和padding(内补白)都设置为0，这样就避免了我们在写代码时忘记清除默认值而引发的一些简单的bug了。

如果看官是位初学者并且时常被各种bug困扰的话，可以尝试使用此代码哦。当然了，上面这段代码在一定程度上影响了性能，并不是最好的方法。下面进入CSS Reset分析阶段。

既然要分析的话，靠我们知道的那几个属性是远远不够的了，网上搜索是必不可少的了。可是，网上一搜，答案是各门各派的都有，该选谁的好呢？Yahoo CSS Reset？Eric Meyer’s CSS Reset？KISSY CSS Reset？......

这时我们就需要先来看看这些知名的CSS Reset了，看看人家是怎么写的，研究研究终会有好处的。这里不提倡大家原班照抄，毕竟这些都不是最好的。要不然网上也不会出现这么多门派了是吧，这些都是各有优缺点的。准确来说，是适合自身需求的。现在，我们需要做的就是：借鉴别人的CSS Reset，然后编写出一套适合自己的CSS Reset。

我自己也在多次经验及借鉴后编写了适合自己的一份CSS Reset，这个是借鉴KISSY CSS Reset的，里面会有一些不同之处和自己的思路及想法，现先拿来分享下自己的，最后再放KISSY CSS Reset的供大家作对比。

body,h1,h2,h3,h4,h5,h6,blockquote,dl,dt,dd,ul,ol,li,fieldset,th,td,pre,textarea,legend,input,button{margin:0;padding:0;}/*清除内外边距 这里经测试发现：div,label,table,span,a,img,em,small,sub,sup,code等这些元素初始值均为0，所以没有必要写进去，上面没有出现p，p默认只有margin值，想想文本之间的高度觉得保留也不错。*/
*html,body{_background-attachment:fixed;_background:url(about:blank)}/*使用position:fixed后兼容ie6页面闪烁*/
body{font:12px/1.5 arial,\5b8b\4f53,tahoma,Helvetica,sans-serif;overflow-x:hidden;}/*最一个属性是为了隐藏低分辨率中浏览器的水平滚动条*/
img,input{border:0;outline:none;vertical-align:top;}/*清除ie中超链接内图片的边框，垂直方向上居顶是清除图片下方占位*/
ul,ol{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
a{color:#666;text-decoration:none;}
a:hover{color:#333;text-decoration:underline;}
.cf{*zoom:1;}/*清除浮动  ie7-*/
.cf:after{content:"";clear:both;display:table;height:0;font-size:0;overflow:hidden}/*即使cf元素内有内容也限制不让其占位*/
.clear{clear:both;font-size:0;line-height:0;}/*清除浮动  特殊情况时使用；第2个属性表示清空占位，第3个属性兼容ie6*/
.fl{float:left}
.fr{float:right}
.poa{position: absolute;}
.por{position: relative;}
/*以下代码均为复制KISSY CSS Reset，个人用处并不大，先保留着以备后用吧。*/
h1 { font-size: 18px;}
h2 { font-size: 16px;}
h3 { font-size: 14px;}
h4, h5, h6 { font-size: 100%; }
address,cite,dfn,em,var{font-style:normal;}
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */

好了，上面就是我自己的CSS Reset了。我们从上面这段CSS Reset中可以看到，在现实情况中，有一部分是我们根本用不到的。至于用到与用不到的问题，具体情况具体对待了。下面再献上KISSY CSS Reset的供大家参考。

资料来源：www.cnblogs.com/yizuierguo/archive/2009/07/15/1524106.html 原创？

/*
KISSY CSS Reset
理念：清除和重置是紧密不可分的
特色：1.适应中文 2.基于最新主流浏览器
维护：玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)
*/
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
　margin: 0;
　padding: 0;
}
/* 设置默认字体 */
body,button, input, select, textarea { /* for ie */
　/*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
　font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
}
h1 { font-size: 18px;}
h1 { font-size: 18px;}
h1 { font-size: 18px;}
h2 { font-size: 16px;}
h3 { font-size: 14px;}
h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
/* 重置列表元素 */
ul, ol { list-style: none; }
/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
　border-bottom: 1px dotted;
　cursor: help;
}
q:before, q:after { content: ''; }
/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */
/* 注：optgroup 无法扶正 */
button, input, select, textarea {
　font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}
/* 重置表格元素 */
table {
　border-collapse: collapse;
　border-spacing: 0;
}
/* 重置 hr */
hr {
　border: none;
　height: 1px;
}
/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2015-03-25/253.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。