如何与 CSS Reset 共存？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会使用 CSS Reset 来重置浏览器默认样式，以便更好地控制页面样式。但是，CSS Reset 可能会影响到我们自己编写的样式，导致一些意外的问题。那么，如何与 CSS Reset 共存呢？

什么是 CSS Reset？

CSS Reset 是一种用于重置浏览器默认样式的技术。由于不同浏览器对默认样式的实现不同，使用 CSS Reset 可以使我们更好地控制网页的外观和排版。CSS Reset 通常包含一系列 CSS 规则，用于将所有 HTML 元素的默认样式重置为相同的值，从而消除浏览器之间的差异。

CSS Reset 的问题

尽管 CSS Reset 可以消除浏览器之间的差异，但它也可能会影响到我们自己编写的样式。例如，如果我们在 CSS Reset 中将所有元素的 margin 和 padding 设置为 0，那么我们在编写样式时就必须为每个元素都重新设置 margin 和 padding，否则页面可能会出现意想不到的布局问题。

如何与 CSS Reset 共存

为了解决 CSS Reset 带来的问题，我们可以使用一些技巧来与它共存。以下是一些示例：

1. 使用 Normalize.css

Normalize.css 是一种比较流行的 CSS Reset 库，它可以消除浏览器之间的差异，同时又不会影响我们自己编写的样式。它包含一系列 CSS 规则，用于将所有 HTML 元素的默认样式重置为相同的值，同时还保留了有用的默认样式。使用 Normalize.css 可以让我们更好地控制页面样式，同时又不必担心 CSS Reset 带来的问题。

<link rel="stylesheet" href="normalize.css">

2. 使用 Boilerplate 模板

Boilerplate 是一种通用的 HTML、CSS 和 JavaScript 模板，它包含了一些常用的 CSS Reset 规则，同时还包含了一些有用的样式和功能。使用 Boilerplate 可以让我们更快地搭建网站，同时还可以避免 CSS Reset 带来的问题。

// javascriptcn.com 代码示例
<!doctype html>
<html class="no-js" lang="">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <!--[if lt IE 8]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <!-- Add your site or application content here -->
  <p>Hello world! This is HTML5 Boilerplate.</p>
  <script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js"></script>
  <script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>

  <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
  <script>
    window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
    ga('create','UA-XXXXX-X','auto');ga('send','pageview')
  </script>
  <script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>

3. 自定义 CSS Reset

如果我们不想使用 Normalize.css 或 Boilerplate，可以考虑自己编写一个自定义的 CSS Reset。这样可以让我们更好地控制页面样式，同时又不必担心 CSS Reset 带来的问题。以下是一个简单的示例：

// javascriptcn.com 代码示例
/* Reset box-sizing to border-box */
* {
  box-sizing: border-box;
}

/* Reset margin and padding */
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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

总结

CSS Reset 是一种用于重置浏览器默认样式的技术，它可以消除浏览器之间的差异，让我们更好地控制页面样式。但是，CSS Reset 也可能会影响到我们自己编写的样式，导致一些意外的问题。为了与 CSS Reset 共存，我们可以使用 Normalize.css、Boilerplate 或自定义 CSS Reset 等技巧。这样可以让我们更好地控制页面样式，同时又不必担心 CSS Reset 带来的问题。

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