CSS Reset 怎样重置样式才不会影响 Bootstrap？-JavaScript中文网-JavaScript教程资源分享门户

前言

作为前端工程师，我们都知道样式表在网页设计中的重要性和作用。在使用 Bootstrap 前，我们需要了解如何进行 CSS Reset，以便更好地与 Bootstrap 框架协作。本文将分享如何进行 CSS Reset，保证不会影响 Bootstrap 框架的正常运行。

什么是 CSS Reset？

CSS Reset 是指在编写 CSS 样式之前，清除默认浏览器样式。因为不同的浏览器之间存在着不同的默认样式，比如 ul、ol、p 标签的 margin 和 padding 等，这些不同的浏览器的默认样式会导致在不同浏览器上显示效果的不同。为了统一样式表的外观，我们需要重置不同浏览器的不同默认样式。

为什么需要 CSS Reset？

使用 CSS Reset 有以下几个好处：

统一样式表在不同浏览器下的显示效果，使网页更美观。
避免浏览器默认样式对页面样式的干扰。
可以减少兼容性问题，提高网页兼容性。

如何进行 CSS Reset？

当我们在编写 CSS 样式表之前，需要对浏览器默认样式进行清除。采用 Normalize.css 或 Reset.css 进行 CSS Reset，它们分别提供了标准的 CSS 样式表，可以覆盖或重置浏览器默认样式。

Normalize.css 和 Reset.css 的不同在于，Normalize.css 保持了一些默认的样式，而 Reset.css 将所有默认样式全部清除掉，并只给出自己定义的样式。

使用方法：

方法一：使用 Normalize.css

下载 Normalize.css。
将 Normalize.css 文件放在 HTML 文件的头部，确保它在其他 CSS 文件之前执行。

<head>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="style.css">
</head>

在编写 CSS 样式表时，可以直接使用 Normalize.css 中的样式，减少样式表的编写。

body {
    background: #f0f0f0;
    color: #333;
}

方法二：使用 Reset.css

下载 Reset.css。
将 Reset.css 文件放在 HTML 文件的头部，确保它在其他 CSS 文件之前执行。

<head>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
</head>

在编写 CSS 样式表时，可以直接使用 Reset.css 中的样式，减少样式表的编写。

body {
    margin: 0;
    padding: 0;
}

如何不影响 Bootstrap？

在使用 CSS Reset 的同时，需要注意不影响 Bootstrap。为了让样式表更好地和 Bootstrap 协作，我们可以在 Reset.css 中精选一些样式进行保留，或者使用特定的 Reset.css，例如 normalize.css，可以避免影响 Bootstrap。

<head>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="style.css">
</head>

结论

CSS Reset 是前端开发中一个重要的技术点，通过清除浏览器默认样式，使样式表更加统一和美观。使用 Normalize.css 或 Reset.css 进行 CSS Reset，可以减少样式表编写，提高网页兼容性。同时，为了不影响 Bootstrap 的正常运行，我们需要使用特定的 Reset.css 或对样式进行精选保留。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/672f3b15eedcc8a97c8d760d