每每有新项目，第一步就是应当使用一个reset.css来重置样式。滥用不如不用，直接拿个现成的reset.css过来将导致后期各种离奇bug的发生。所以最好还是自己写一个reset.css，并且要明白每一条reset都是用来做什么的。
1 /* 1.默认色彩 */ 2 /* YUI2 */ 3 html { 4 /* 不要在reset中设置背景色和字体颜色 */ 5 color: #000; 6 background: #FFF; 7 } 8 9 /* 2.边距 */ 10 /* YUI2 */ 11 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { 12 margin: 0; 13 padding: 0; 14 } 15 /* Alice */ 16 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, 17 hr, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { /* HTML5 */ 18 margin: 0; 19 padding: 0; 20 } 21 22 /* 3.边框 */ 23 /* YUI2 and Alice */ 24 fieldset, img { /* 去除默认边框 */ 25 border: 0; 26 } 27 abbr, acronym { /* 去掉 Firefox/Safari下此元素的边框 */ 28 border: 0; 29 font-variant: normal; 30 } 31 32 /* 4.外边框(outline) */ 33 /* update - 务必重新定义获取焦点后的样式！ */ 34 /* remember to define focus styles! */ 35 :focus { 36 outline: 0; 37 } 38 39 /* 5.字体 */ 40 /* 5.1语义 */ 41 /* YUI2 */ 42 address, caption, cite, code, dfn, em, strong, th, var, optgroup { 43 font-style: inherit; 44 font-weight: inherit; 45 } 46 /* Alice */ 47 address, caption, cite, code, dfn, em, th, var { 48 font-style: normal; /* 可自定义之 */ 49 font-weight: 500; /* 可自定义之 */ 50 } 51 52 /* 5.2字体 - 标题 */ 53 /* YUI2 */ 54 h1, h2, h3, h4, h5, h6 { 55 font-size: 100%; 56 font-weight: normal; 57 } 58 /* Alice - 来自yahoo, 让标题都自定义, 适应多个系统应用 */ 59 h1,h2,h3,h4,h5,h6 { 60 font-size:100%; 61 font-weight:500; /* 可自定义之 */ 62 } 63 64 /* 5.3字体 - 表单 */ 65 /* YUI2 */ 66 input, button, textarea, select, optgroup, option { /* 解决表单元素不继承父级 font的问题，但对IE6/7不起作用 */ 67 font-family: inherit; 68 font-size: inherit; 69 font-style: inherit; 70 font-weight: inherit; 71 } 72 input, button, textarea, select { 73 *font-size: 100%; 74 } 75 76 /* Alice */ 77 body, button, input, select, textarea {/* 解决表单元素不继承父级 font的问题，直接自定义表单字体以解决兼容性问题 */ 78 font: 12px/1.5 tahoma, arial, \5b8b\4f53; 79 } 80 button, input, select, textarea { 81 font-size: 100%; 82 } 83 84 /* 6.行高(line-height) */ 85 /* Alice */ 86 body, button, input, select, textarea { /* 行高默认所有元素都会继承的 */ 87 /* IE6下，行高为1时，中文字顶部会被削掉几像素，字体加粗时尤为明显。切记不要置为1 */ 88 font: 12px/1.5 tahoma, arial, \5b8b\4f53; 89 } 90 91 /* 7.列表 */ 92 /* YUI2 */ 93 li { 94 list-style: none; 95 } 96 /* Alice */ 97 /* 去掉列表前的标识, li 会继承 */ 98 ol,ul { 99 list-style:none; 100 } 101 102 /* 8.表格 */ 103 /* YUI2 and Alice */ 104 /* 去掉各Table/cell的边距并让其边重合 */ 105 table { 106 border-collapse: collapse; 107 border-spacing: 0; 108 } 109 /* 对齐是排版最重要的因素, 别让什么都居中 */ 110 caption, th { 111 text-align: left; 112 } 113 114 /* 9.上下标 */ 115 /* YUI2 */ 116 sup, sub { 117 vertical-align: baseline; /* 建议加上font-size: 100%;让重置更加 */ 118 } 119 /* Alice - 统一上标和下标 */ 120 sub, sup { /* 可自定义 */ 121 font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; 122 } 123 sup {top: -0.5em;} 124 sub {bottom: -0.25em;} 125 126 /* 10.插入和删除 */ 127 /* YUI2 */ 128 del, ins { /* 直接清除了ins的下划线和del的删除线 */ 129 text-decoration: none; 130 } 131 /* Alice */ 132 /* 默认不显示下划线，保持页面简洁 */ 133 ins, a { 134 text-decoration:none; 135 } 136 /* 一致的 del 样式 */ 137 del { 138 text-decoration:line-through; 139 } 140 141 /* 11.引用元素的引号 */ 142 /* YUI2 and Alice */ 143 q:before, q:after { 144 content: ''; 145 } 146 /* Eric - 建议 */ 147 blockquote, q { 148 quotes: none; 149 } 150 blockquote:before, blockquote:after, 151 q:before, q:after { 152 content: ''; 153 content: none; 154 } 155 156 /* 12.链接 */ 157 /* YUI2与Alice都没有设定 */ 158 a { /* 建议去掉下划线，这种方式过于粗糙 */ 159 text-decoration: none; 160 } 161 /* 建议使用这种方式去除链接下划线 */ 162 :link, :visited { 163 text-decoration: none; 164 } 165 166 /* 13.其它 */ 167 /* Alice */ 168 /* ie6 7 8(q) bug 显示为行内表现 */ 169 iframe{ 170 display:block; 171 }