Reset CSS（CSS初始化）总结

用户1696846

发布于 2018-07-16 16:24:19

2.4K0

发布于 2018-07-16 16:24:19

文章被收录于专栏：Android自学Android自学

市面上浏览器众多，各种浏览器对标签默认属性值的定义不尽相同。

那如何保持CSS在每个浏览器上的显示效果相同呢？这就涉及到了CSS初始化的问题。

熟话说，先破后立。CSS初始化的思想就是先把所有的默认值置为相同的，再把有需要的改成需要的值，这样所有浏览器的显示效果都会相同。但是CSS能控制的东西太多，如果这样写：


 *{ margin: 0; padding: 0; }

这样。。。简单是简单，但是一方面占用系统资源太大，另一方面，你把不需要置为0的标签也变成0了，这样后期使用的时候你还得一个一个的补回来。所以现在几乎没人会用这样的设置了。

我在网上找了一个前Yahoo前端工程师的CSS Reset和一个个人的CSS Reset，两个各有优缺点，先放在这里，以备后用。

Yahoo CSS Reset：


/*css reset code */
 
/****  文字大小初始化,使1em=10px *****/
body {
font-size:62.5%;
} /* for IE/Win */
html>body {
font-size:10px;
} /* for everything else */
 
/*字体边框等初始化*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
 padding: 0;
 margin: 0;
 }
table {
 border-collapse: collapse;
 border-spacing: 0;
 }
fieldset,img {
 border: 0;
 }
 img {
 display:block;
 }
address,caption,cite,code,dfn,th,var {
 font-weight: normal;
 font-style: normal;
 }
ol,ul {
 list-style: none;
 }
caption,th {
 text-align: left;
 }
h1,h2,h3,h4,h5,h6 {
 font-weight: normal;
 font-size: 100%;
 }
q:before,q:after {
 content:'';
 }
abbr,acronym { border: 0;
 }
 
a {
text-decoration:none;
}


/*css reset code */
/****  文字大小初始化,使1em=10px *****/
body {
font-size:62.5%;
} /* for IE/Win */
html>body {
font-size:10px;
} /* for everything else */
/*字体边框等初始化*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
 padding: 0;
 margin: 0;
 }
table {
 border-collapse: collapse;
 border-spacing: 0;
 }
fieldset,img {
 border: 0;
 }
 img {
 display:block;
 }
address,caption,cite,code,dfn,th,var {
 font-weight: normal;
 font-style: normal;
 }
ol,ul {
 list-style: none;
 }
caption,th {
 text-align: left;
 }
h1,h2,h3,h4,h5,h6 {
 font-weight: normal;
 font-size: 100%;
 }
q:before,q:after {
 content:'';
 }
abbr,acronym { border: 0;
 }
a {
text-decoration:none;
}

可以到我的GitHub的CSS项目下面下载。

关于CSS Reset的讨论我在知乎上看到一个帖子，讨论Normalize.css 与传统的 CSS Reset 有哪些区别？

上面说到：