趣谈 Cross Browser CSS Reset 重置样式表-JavaScript中文网-JavaScript教程资源分享门户

作为前端开发人员，CSS 是我们必须掌握的一门技能，但不同浏览器对 CSS 样式特别是默认样式的渲染方法不尽相同，这时我们就需要使用 CSS Reset 来重置这些默认样式，保证页面实现的一致性和 cross-browser 兼容性。本文将从以下几个方面详细介绍 CSS Reset，并给出一个基本的 CSS Reset 模板。

什么是 CSS Reset？

CSS Reset（重置样式表），是 CSS 开发者用来消除浏览器对 HTML 元素的默认样式的技术手段。CSS Reset 方法通常通过全局选择器来重置标签元素所有 CSS 属性并赋予新值，从而减少或消除浏览器之间的视觉差异，使网页在不同的浏览器中表现更加统一稳定。

为何需要 CSS Reset？

由于浏览器之间的差异性较大，即使固定使用一种浏览器，网页在不同版本之间也可能出现差异。而浏览器默认样式却给我们带来了不一致性，通过使用 CSS Reset，我们可以消除这些默认样式，使样式不会被浏览器干扰，同时也可以减少我们编写的样式和代码量，提高代码的可读性和维护性。

举一个例子，大多数浏览器默认设置了页面的行高，因此当文本大小不同时，不同浏览器对于文本的显示方式也是不一样的。如果我们制定了全面的重置样式表并统一的样式经验准则，就可以避免这些浏览器间的细微差异，使网页的样式表现更加统一。

CSS Reset 具体实现

在实际中，我们可以通过以下几种方式来实现 CSS Reset：

1. 直接重置样式

直接重置样式是通过把 HTML 标签的多个属性全部都设为 0 或 null 来消除浏览器的默认样式。

// javascriptcn.com 代码示例
/* 通用重置 */
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* 针对部分标签重置 */
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

2. 给标签预设样式

除了直接重置样式，我们还可以给每个标签预设样式，从而消除浏览器默认样式带来的影响。

html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

CSS Reset 模板

以下是一个基本的 CSS Reset 模板，可以根据自己的需求进行修改，也可以通过引入其他软件包来使用更为强大的样式表：

// javascriptcn.com 代码示例
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, figcaption, figure,footer, header, hgroup, menu, nav, section,summary,time, mark, audio, video{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    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;
}

总结

CSS Reset 是提高跨浏览器兼容性的重要手段之一，了解并掌握好重置样式表的方法和技巧，可以使我们轻松实现网页的风格和布局，在开发过程中也可以避免一些奇怪的 bug。

以上就是关于 CSS Reset 的详细介绍，希望本文可以对大家有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6545c8967d4982a6ebf66b74