现代CSS样式重置优秀实践！

大家好，我是 CUGGZ。

我们提供的服务有：成都网站制作、做网站、微信公众号开发、网站优化、网站认证、东兴ssl等。为成百上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的东兴网站制作公司

当开始一个新的前端项目时，首要任务就是重置 CSS 中的一些默认样式。下面就来看看在现代 CSS 中如何进行样式重置。本文将深入研究每条规则，以了解它的作用和使用它的原因！

下面是自定义的 CSS 重置代码：

/*
  1. 使用更直观的 box-sizing 模型
*/
*, *::before, *::after {
  box-sizing: border-box;
}
/*
  2. 移除默认 margin
*/
* {
  margin: 0;
}
/*
  3. 在应用中允许基于百分比的高度
*/
html, body {
  height: 100%;
}
/*
  排版调整
  4. 添加无障碍行高
  5. 改进文本渲染
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. 改进媒体默认设置
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/*
  7. 删除内置表单排版样式
*/
input, button, textarea, select {
  font: inherit;
}
/*
  8. 避免文字溢出
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/*
  9. 创建根层叠上下文
*/
#root, #__next {
  isolation: isolate;
}

这里的代码不多，但是这个小样式表中包含了很多内容。下面将逐条介绍！

从历史上看，CSS 重置的主要目标是确保浏览器之间的一致性，并撤消所有默认样式。这段 CSS 重置代码并没有真正做这些事情。

如今，浏览器在布局或间距方面没有太大的差异。总的来说，浏览器准确的实现了 CSS 规范，并且一切都如你期望的那样，所以它不再是必要的了。

这里的 CSS 重置可能不符合“CSS重置”的经典定义，但更具创造性！

1、box-sizing 模型

先来看一段代码，假设没有应用其他 CSS，以下场景中的 .box 元素有多宽？

这里的 .box 元素的宽度为：100%。因为它的父级宽度为 200px ，所以 100% 将解析为 200px。但是它在哪里应用了 200px 的宽度呢？默认情况下，它将该大小应用于内容区域，即下图中白色的区域：

width: 100% 声明会将 .box 的内容框设置为 200px。而 padding 将增加额外的 40 px（每边 20 px）。border 将增加额外的 4px（每边 2px）。当进行计算时，粉红色矩形的宽度将是 244 px。

当尝试将 244px 的框放入宽度为 200px 的父级时，就会发生溢出：

我们可以通过设置以下规则来更改这种奇怪的行为：

*, *::before, *::after {
  box-sizing: border-box;
}

应用此规则后，百分比将根据 border-box 进行解析。在上面的例子中，粉色框宽度为 200 px，内部内容框的宽度将缩小到 156 px（200 px - 40 px - 4 px）。

这是一条必须具备的规则，它使 CSS 更好用。这里使用通配符选择器 (*) 将它应用于所有元素和伪元素。与人们普遍的看法相反，这对性能来说并不坏。

网络上有一些人建议改为执行以下操作：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

如果i正在尝试迁移一个大型的已经存在的项目以使用 border-box，这可能是一个有用的策略。如果要从头开始一个全新的项目，这就是没有必要的。为了简单起见，上面的 CSS 重置中省略了它。

那在什么时候，这是有用的呢？下面来看一个可能有用的示例。如果您正在尝试迁移一个大型的预先存在的项目以使用 border-box，这可能是一个有用的策略。如果您要从头开始一个全新的项目，则没有必要。为了简单起见，我在 CSS 重置中省略了它。

展开以查看何时可能有用的示例。首先，将 legacy 的 box-sizing 属性设置为 content-box，即 box-sizing 属性的默认值：

.legacy {
  box-sizing: content-box;
}

然后，当应用有一部分尚未迁移到使用 border-box 时，可以将类这样放：

这里，

 被赋予了 legacy 类，因此它使用 box-sizing: content-box。它的子元素