[CSS] CSS实践--CSS Reset

概述

    Web项目中我们经常会使用到CSS Reset这个概念。那么CSS Reset是什么了。我们知道不同的浏览器对HTML标签默认的样式是有差别的，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而在Firefox下，它的缩进是由padding实现的。在实际开发中，浏览器的默认样式会给我带来很多意想不到的麻烦。省去这些麻烦的方式--一开始就将浏览器的默认样式全部覆盖。这就引申出CSS Reset概念。最简单的说法CSS Reset就是把浏览器提供的默认样式覆盖掉。

 

CSS Rest 内容

    项目中我们常用一下的代码进行Rest CSS。

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,
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,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video
{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section
{
  display: block;
}

body
{
  cursor: default;
  line-height: 1;
}

ol,
ul
{
  list-style: none;
}

blockquote,
q
{
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after
{
  content: '';
  content: none;
}

table
{
  border-collapse: collapse;
  border-spacing: 0;
}

input,
select
{
  vertical-align: middle;
}

 

CSS Rest 引用  

    http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/ （Reset Styles）

    http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/  （Reworked Reset）

    http://meyerweb.com/eric/tools/css/reset/index.html  （CSS Tools: Reset CSS）

   （如果有需要的话，我可以对这些文章进行翻译）