前端开发中，CSS 重置样式是一个非常重要的话题。当我们一个新的网站或应用的时候，我们需要考虑如何让我们的样式更整洁、更标准化。这时候，其实就需要做出一个决定：重置或者归零？
重置样式
重置样式意味着我们需要完全清除任何默认样式。这意味着我们的所有元素都会被重置为默认状态，例如所有元素都会变成黑色或者白色，所有字体大小都将变为中号等等。因为浏览器在绘制页面时使用自己的默认样式，所以这样做可以在不同的浏览器中创建一致的外观和体验。
下面是一个基本的 CSS 重置样式：
- - ------- -- -------- -- ----------- ----------- -
在这里，我们使用通配符将所有元素的边距、内边距和盒模型设置为 0。我们还通过 box-sizing 属性将所有元素的盒模型设置为 border-box，这意味着元素的宽度和高度将包括边框和内边距，并且不会在设置宽度和高度时改变。
通过使用 CSS 重置样式，您可以确保您的站点在不同的浏览器和操作系统中保持一致的外观和体验。但是，您需要注意的是，这可能会导致某些元素变形或者在您不希望的情况下影响页面。
归零样式
归零样式是基于重置样式的一种改进方法。与重置样式不同，归零样式是从一个干净的基础开始构建的。它的目的是保持尽可能多的默认样式，同时删除或更改可能不必要或具有争议的样式。
下面是一个基本的 CSS 归零样式：
----- ----- ---- ----- --- --- --- --- --- --- -- ----------- ---- -- --- ---- ------- --- --- --- ------ ------ --- ------ --- ------ --- ------- ------ ------ -------- - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- -
在这里，我们添加了一些额外的样式。例如，我们删除了所有元素的边框和将字体大小设置为 100%。我们还使用 font 属性和 vertical-align 属性，使元素继承默认的字体和基线排列。
使用这种方法，我们可以保持大部分默认样式，并仅对特定的元素进行更改。这可以使我们的样式更易于维护，因为较少的样式更容易跟踪和预测。
如何选择
如果您正在考虑使用重置样式或归零样式，请记住以下几点：
- 重置样式可能导致某些元素变形或者在某些情况下影响页面。
- 使用归零样式可以保留一些默认样式，并使您的代码更易于维护。
- 在选择样式时，请始终牢记您的设计目标和实际需求。
因此，在选择样式方法时，您需要考虑您的应用要求和您的个人偏好。如果您需要一致的外观和体验，或者希望在不同的浏览器和平台上创建一致的样式，那么重置样式可能是更好的选择。否则，归零样式可能是更好的选择，因为它可以保留默认样式，并使您的代码更易于维护。
结论
无论您选择重置样式还是归零样式，目标都是让您的站点看起来更标准化、整洁和有组织。这篇文章提供了两种方法，供您决定。重置样式可以创建一致的体验，而归零样式可以更好地保持默认样式，并使代码更易于维护。无论您选择哪种方法，您的站点都会受益于清晰、整洁和规范化的代码。
希望这篇文章能够帮助您了解有关选择重置样式还是归零样式的更多信息。请记住，在选择样式时，始终考虑您的设计目标、实际需求以及对站点维护的影响。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66ee70ab6fbf96019721d6d0