CSS RESET简述

最新推荐文章于 2025-09-04 16:57:43 发布

原创最新推荐文章于 2025-09-04 16:57:43 发布 · 503 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #布局

CSS 专栏收录该内容

3 篇文章

订阅专栏

为什么需要CSS RESET

不少浏览器的对元素的默认渲染规则导致了在开发页面的时候我们经常不能准确还原设计图，所以就需要手动把样式重置一下，就像一张白纸一样，这样自己就可以自由控制页面的布局了。

最开始的CSS RESET

相信不少初学CSS的同学都会使用下面的规则来重置样式

* {
    margin:0;
    padding:0;
}

这样的好处是显而易见的，代码少的可怜，并且达到了我们想要的效果。但是，按我的理解，这样的写法会使浏览器将所有的页面元素都重置一遍margin和padding，尽管不是所有的元素都会有默认的margin和padding，这给浏览器造成了不必要的负担。后来，我学着去构建自己的CSS RESET。

body {
    color:#666;
    -webkit-font-smoothing: antialiased;
}

body, input, label, select, option, textarea, button, fieldset, legend {
    font:12px/1.5 Arial, Helvetica, sans-serif,\5b8b\4f53; 
}

body, button, textarea, blockquote,  fieldset,body, legend, dl, dt, dd, h1, h2, h3, h4, h5, h6, hr, input, ul, ol, p, pre, td, th {
    margin:0px;
    padding:0px;
}

input {border:none;}

ul, ol { list-style:none;}

a {text-decoration: none;}

a:hover { text-decoration: underline; }

/*将斜体扶正*/
em {font-style: normal;}

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

/*重置hr，需要自己添加背景颜色*/
hr {
    border:none;
    height:1px;
}

以上的总结综合了这里和淘宝首页。

链接里的文章指出的不少hack和元素，现在我在开发页面的时候还不会用到，所以就只借鉴了一些我目前会使用到的和理解的样式。而且我还有一个疑问：为什么淘宝和链接里的文章都会重置li和dt这两个元素的margin和padding，经过我的测试，这两个两个元素并没有默认的margin和padding啊？有知道的同学吗，留言告诉我为什么。。