什么是布局重置技术？
在前端开发中，我们经常会遇到不同浏览器之间的兼容性问题。其中一个最常见的问题就是不同浏览器对 HTML 元素的默认样式不同，导致同一个页面在不同浏览器中呈现的效果不一致。
为了解决这个问题，我们可以使用布局重置技术，即通过一些 CSS 样式规则来重置 HTML 元素的默认样式，使得在不同浏览器中呈现的效果更加一致。
如何实现布局重置技术？
实现布局重置技术的方法有很多种，这里介绍两种常用的方法。
方法一：使用通用选择器
通用选择器 * 可以匹配 HTML 中的所有元素。我们可以通过设置通用选择器的样式来重置 HTML 元素的默认样式。例如：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}上面的 CSS 代码中，我们通过设置 margin: 0 和 padding: 0 来重置所有 HTML 元素的默认外边距和内边距。同时，我们还设置了 box-sizing: border-box，使得元素的宽度和高度包括边框和内边距在内。
方法二：使用 normalize.css 库
normalize.css 是一个开源的 CSS 库，它提供了一套完整的 CSS 样式规则，可以重置 HTML 元素的默认样式，并且保留了一些有用的默认样式。我们可以将 normalize.css 库引入到项目中，来实现布局重置技术。例如：
<link rel="stylesheet" href="normalize.css">
如何使用布局重置技术？
使用布局重置技术的目的是为了让不同浏览器呈现的页面效果更加一致。因此，在项目中使用布局重置技术时，我们需要注意以下几点：
布局重置技术只是重置了 HTML 元素的默认样式，但并没有提供具体的页面布局方案。因此，在使用布局重置技术的同时，我们还需要使用其他的 CSS 定位技术来实现具体的页面布局。
布局重置技术可能会影响到一些已经设置了样式的 HTML 元素，因此，在使用布局重置技术时，我们需要仔细检查页面的效果，确保没有出现意外的样式问题。
布局重置技术只是一种解决浏览器兼容性问题的方法，但并不能解决所有的兼容性问题。在实际开发中，我们还需要使用其他的兼容性解决方案，例如 CSS Hack、浏览器嗅探等。
示例代码
下面是一个使用布局重置技术和 CSS 定位技术实现的简单页面布局示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-----------------------
-------
- -
------- --
-------- --
----------- -----------
-
---------- -
------ ------
------- - -----
-
------- -
------- ------
----------------- -----
------ -----
----------- -------
------------ ------
---------- -----
-
----- -
------- ------
----------------- --------
-
------- -
------- -----
----------------- -----
------ -----
----------- -------
------------ -----
---------- -----
-
--------
-------
------
---- ------------------
---- ---------------------------
---- -----------------------
---- ---------------------------
------
-------
-------上面的代码中，我们使用了通用选择器来重置 HTML 元素的默认样式，同时使用了 CSS 定位技术来实现页面布局。通过这种方式，我们可以在不同浏览器中呈现出一致的页面效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d939efa941bf71340c87d6
