前言
在编写前端页面时，我们通常会使用 CSS 来设置样式，但不同浏览器对 CSS 的默认样式不尽相同，这就导致了在不同浏览器下同一个样式可能会呈现不同的效果，给我们的页面带来了困扰和不确定性。为了解决这一问题，我们通常会使用 CSS Reset。
CSS Reset 是一种技术手段，它的主要作用是让不同浏览器的元素在页面上的呈现效果统一，消除不必要的差异。但是，在使用 CSS Reset 的过程中，也会出现一些让人感到困惑的问题。下面我们就来详细分析一下在使用 CSS Reset 时，对样式继承会产生什么影响，并探讨相应的解决方法。
影响分析
样式继承的基本原理
在CSS中，样式有继承和非继承两种，继承样式可以被父元素传递给其子元素，并且可以被子孙元素继承。其中，关于样式的继承，以下几种情况不能被继承（一般是被重置了）：
部分 CSS 属性不具有继承性，如 margin、padding、border、background、height、width、font-size 等；
在子元素的样式设置了该属性值，同时该属性值为当前元素的默认值时，子元素的该属性值将不会被继承。
影响表现
在使用 CSS Reset 的过程中，由于 CSS Reset 对浏览器的默认样式进行了重置，所以会对原本会被继承的样式产生影响，导致样式表现出现问题。主要影响表现有以下两种：
对默认样式的修改可能导致样式不被当前元素继承；
对当前元素的样式设置可能会对子元素样式的继承产生影响，或者导致子元素某些样式不能被正确继承。
比如，我们使用一个简单的 CSS Reset：
*{ margin: 0; padding: 0; }
当我们设置了一个 class 为 container 的元素样式：
.container{ width: 100%; height: 200px; border: 1px solid black; }
此时，如果我们想要使用内联元素来包裹住这个 .container 元素：
<div class="wrapper"> <span class="container"></span> </div>
由于 span 元素是内联元素，其默认只占据它所包含文本的空间大小，容器宽度将被限制，展示不出来：
而如果采用块级元素来包裹（如 div），因为 CSS Reset 中清除了 margin 和 padding，所以父元素的 margin 和 padding 将不会被子元素继承，这意味着父元素的 margin 和 padding 样式将失效。
解决方法
解决方法1：手动重新设置继承样式
我们可以在 Reset 样式表中添加一些样式，来让浏览器重新遵循部分 CSS 属性的继承规则：
html,body,div,li,p,h1,h2,h3,h4,h5,h6,ul,ol,form,fieldset,input,textarea,button{ margin:0; padding:0; border:0; outline:0; font-size:100%; /* Add the following line */ vertical-align:baseline; /* Prevent Webkit and IE from displaying values other than “normal” in some cases */ background:none; text-decoration:none; list-style:none; }
其中， vertical-align: baseline; 这一行代码就是为了重新设置 CSS 里面的一个不被继承的私有属性。通过设置 vertical-align:baseline;，让文本和基线对齐，来保证样式的正确继承。
解决方法2：重置单个元素的样式
另一种方式是在某个元素中放置一个容器元素，并将容器元素的 Reset 样式应用到该元素的顶级容器中，以限制 Reset 改变的影响范围。示例代码：
-- -------------------- ---- ------- -- ----- ----- -- -- ---------- - ------- -- -------- -- - -- -------- -- -------------- - ------ ----- ------- ------ ------- --- ----- ------ -展开代码
<!-- 使用包含元素包含容器元素 --> <div class="default-style"> <div class="container">我是内容</div> </div>
上述方法的好处是，我们只需要在需要的元素上应用 Reset 样式，并限制其影响的范围，不会影响其他元素的样式。
总结
在实际开发中，我们有时候并不需要完全重置某些元素的默认样式，而是只需要部分修改它的样式，在这种情况下，完全使用 CSS Reset 一种方式是并不恰当的。因此，在使用 CSS Reset 的时候，需要根据实际需要进行一定的调整，不仅需要注意对样式的修改，更要切记不要去破坏样式的继承规则，以保证页面样式的正确性。
因此在开发过程中，我们推荐在 Reset 样式表中仅仅清除不必要的样式，重写需要修改的样式，将修改的范围限制在仅仅需要修改的元素上，而不是选手全局的 CSS 样式。
本篇文章从样式继承的基本原理分析，通过分析 CSS Reset 对样式继承所产生的影响及解决方法，对于以当代为前端开发的开发人员有很好的借鉴作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ab61b968c7c53b0661d12
