CSS Reset 是一个在前端开发中常用的技术方案，它可以通过重置浏览器的默认样式来使网页在不同浏览器中呈现一致的效果。在这里，我们将介绍一种新风格的 CSS Reset 方案并提供详细的学习指导。
传统 CSS Reset 的不足
在传统的 CSS Reset 方案中，通常会将所有标签的样式重置为一致的效果，从而避免不同浏览器之间的差异。例如，以下是一个基础的 CSS Reset：
* {
margin: 0;
padding: 0;
}这个重置方案将所有元素的内外边距都设置为 0，这样就可以消除浏览器默认样式所带来的影响。但是，这种方案也存在一些问题：
重置太过粗略：将所有元素的内外边距都设置为 0 的做法，在某些特殊情况下会影响到网页的设计效果。例如，在某些布局中，内边距的设置可能是有必要的，但使用传统的 CSS Reset 方案会将这些设置全部清空。
兼容性不足：不同的浏览器在内部实现上存在差异，因此即使采用了 CSS Reset 方案，不同浏览器之间的呈现效果也可能存在差异。
新风格 CSS Reset 方案
有鉴于此，我们将介绍一种新风格的 CSS Reset 方案，该方案可以在避免传统问题的同时，也可以兼顾兼容性问题。该方案的核心思想是，在需要校正浏览器元素样式的时候，尽量使用最小化的方式去处理，尽可能保留原有元素的默认样式和特征。
以下是一个基础的新风格 CSS Reset 方案：
// www.javascriptcn.com code example
html {
box-sizing: border-box;
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
*, *::before, *::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}该方案的重点处理包括以下两个部分：
基础 CSS 样式处理：通过将
html根元素的box-sizing属性设置为border-box来避免浏览器在尺寸计算上的差异。同时，使用font-size: 62.5%的处理方式，除了能方便地进行基于像素的计算，还可以避免某些浏览器在字体渲染时的一些问题。需要注意的是，-webkit-text-size-adjust和-ms-text-size-adjust的设置，能够避免在某些浏览器中字体渲染过大的问题。通配符重置处理：通配符重置被作为避免浏览器默认样式影响的主要途径。在新风格 CSS Reset 方案中，通配符重置仅仅对所有元素的
margin和padding进行了清空，并保留了元素的默认盒模型属性。
学习与指导意义
新风格 CSS Reset 方案不仅仅解决了传统 CSS Reset 方案中的问题，同时，它也带来以下几个显著的学习和指导意义：
灵活性： 通过仅限制对于的元素样式，新风格 CSS Reset 方案保留了原有元素的默认样式和特征，从而在具体实现时，提供了更大的灵活性和调试能力。
性能： 在处理精细化的样式时，新风格 CSS Reset 方案可以减少直接重置元素样式所产生的冗余计算和性能消耗。
兼容性： 新风格 CSS Reset 方案可以更好地保证在不同浏览器中的可视效果一致，同时避免了传统 CSS Reset 方案中由于过度粗略的问题产生的兼容性问题。
在实际开发中，新风格 CSS Reset 方案可以有以下几点具体落地指导意义：
将
html元素的font-size属性设置为62.5%，方便基于像素的计算。在具体的 reset 处理过程中，尽可能保留元素的默认样式和特征。
通过使用 normalize.css 或 reset.css 等现成的 CSS Reset 方案，可以避免直接进行 CSS Reset 开发所带来的不必要的工作量和风险。
示例代码
以下代码是一个最基础的新风格 CSS Reset 方案的实现示例：
// www.javascriptcn.com code example
html {
box-sizing: border-box;
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
*, *::before, *::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}建议大家可以尝试使用该方案，结合实际业务需求进行实现和调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d688d5a941bf7134c51518