在响应式布局的开发中，CSS Reset 是非常重要的一环。因为每个浏览器都会有默认的样式，而这些样式会对我们的布局造成一定的影响。如果不进行统一清除，可能会出现布局不规则或样式失效等问题。本文将详细介绍 CSS Reset 对响应式布局的影响及解决方法。
CSS Reset 的作用
CSS Reset 的作用是重置浏览器默认样式，清除浏览器自带的样式并让它们统一。目的是确保每个浏览器在展示网页时看到的效果是一致的。
CSS Reset 分为两种，一种是使用现成的 Reset 样式表，另一种是自己编写样式表清除默认样式。两种方式各有优缺点，但无论采用哪种方式，都需要谨慎选择和应用。过度使用 Reset 可能会导致样式的丢失，影响网页的可读性和可用性。
CSS Reset 对响应式布局的影响
CSS Reset 对响应式布局的影响在于其重置了 HTML 元素的默认样式，除去浏览器的默认样式设置，这些默认设置往往不符合目前设计的需要。在响应式布局的编写中，需要注意以下几点：
1.清除默认的 margin 和 padding
浏览器默认的 margin 和 padding 会让页面出现不必要的空白或边框，因此需要清除这些默认值。使用通配符 * 可以清除所有元素的 margin 和 padding，但是要注意设置 padding 时有一些元素我们希望保留默认的 padding，如 input 和 textarea 等。
- -
------- --
-------- --
-
-------------------
-----------------------
-------- -
-------- ------
-2.统一字体和大小
浏览器默认的字体和大小会因浏览器不同而不同，这会影响布局的整体效果。为了解决这个问题，需要手动设置字体的名称和大小，并使用 em、rem 等相对单位来控制字体大小。
3.清除浮动与 BFC
响应式布局中很常见的问题是浮动元素导致高度塌陷，为了解决这个问题，我们可以使用清除浮动以及 BFC。
清除浮动可以通过设置父容器的 overflow 或使用伪元素 ::after。而 BFC 的作用是创建一个新的块级格式上下文，解决浮动元素高度塌陷的问题。
---------------- -
-------- ---
-------- ------
------ -----
-
---- -
--------- -------
-解决方案
在响应式布局的编写中，我们需要谨慎选择 CSS Reset，并根据实际情况进行调整和修改。下面是一些常用的 Reset 样式表：
Normalize
Normalize 是一个流行的 CSS Reset 样式表，它不仅仅清除浏览器默认样式，还在重置样式的同时保留了一些有用的样式以及跨浏览器的行为。打包后的 Normalize 样式表大小约为 10KB。
安装 Normalize 可以通过 npm［https://www.npmjs.com/package/normalize.css］来进行。
使用 Normalize 的方法是在 head 部分加入样式链接：
------ ----- ---------------- ----------------------------------------------------- -------
Reset CSS
Reset CSS 是一个重置浏览器默认样式的样式表，它将每个元素的 margin 和 padding 设为 0，并去掉了一些默认样式。而这样也可能会影响到部分我们已经编写好的样式。
重置样式表主要适用于那些对于网站的样式有着自己的看法的开发者，能够更好的控制原有样式。
------ ----- ---------------- --------------------- -------
结论
CSS Reset 是响应式布局的重要组成部分，可以统一不同浏览器的默认样式，提高页面的可读性和可用性。在使用 Reset 样式表的过程中，需要注意根据实际情况进行调整和修改，以保证样式的正常编写和展示。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671da4999babaf620fb75c7b