1. 引言
在编写前端页面时，经常会遇到元素的宽度与高度不如预期，导致布局混乱的情况。而这可能正是因为浏览器的 box-sizing 属性所引起的。为了解决这个问题，本文将介绍如何使用 CSS Reset 进行处理。
2. 什么是 box-sizing 属性
box-sizing 属性是 CSS 中非常实用的一个属性，用于设置元素的宽度与高度如何计算。默认情况下，元素的宽度和高度由其内容区域决定，加上内边距和边框的宽度之和就是元素最终的宽度和高度。而使用 box-sizing 属性则可以让元素的宽度和高度包含内边距和边框的宽度。
总结一下，就是 box-sizing 属性有两个取值：
- content-box：默认取值。宽度和高度只包含元素的内容区域，不包含内边距和边框的宽度。
- border-box：元素的宽度和高度包含内边距和边框的宽度。
3. box-sizing 必须与组件库的设计保持统一
在编写网页时，我们经常使用各种组件库。这些库可能会默认设置 box-sizing 属性并使用 border-box 属性。如果在这种情况下我们使用 content-box 属性，在设置元素宽度和高度时会遇到问题。这是因为元素宽度和高度会以 content-box 的方式计算，而组件库实现的宽度和高度是 border-box 的计算方式。这样会导致布局出现问题。
统一 box-sizing 属性的好处：
- 在不同组件库之间的交换更加顺畅；
- 样式的维护更加方便；
- 防止计算样式的错误。
4. 常见的 CSS Reset 库
在 CSS Reset 库中，我们可以找到一些已经实现了 box-sizing 属性设置的库。下面列出了一些常用的 CSS Reset 库:
- normalize.css
- reset.css
- modernizr.css
- yahoo.css
5. 使用示例
在示例中，先定义了一个 div 元素，并设置宽度为 200 像素和高度为 100 像素。接着，定义了一个内部元素 div.inner，并设置了 10 像素的内边距和 5 像素的边框。如下：
HTML 代码：
<div>
<div class="inner"></div>
</div>CSS 代码：
-- -------------------- ---- -------
--- -
------ ------
------- ------
----------------- -------
-
--------- -
-------- -----
------- --- ----- ----
-结果如下图所示：
可以看到，div 元素的宽度和高度都是 200 像素和 100 像素，而 div.inner 的宽度和高度比 div 元素小。这是因为没有设置元素的 box-sizing 属性，使用的是默认的 content-box 属性。
接下来，使用 box-sizing 属性进行设置：
-- -------------------- ---- ------- ---- - ----------- ---------- ----------- - -- ---------- -------- - ----------- -------- -
这里，我们为整个网页设置了 box-sizing 的默认值，并且设置了所有元素的 box-sizing 值为 inherit。这样，在整个网页中的所有元素都会使用 border-box 计算宽度和高度。
修改后的 CSS 代码如下：
-- -------------------- ---- -------
---- -
----------- ---------- -----------
-
--
----------
-------- -
----------- --------
-
--- -
------ ------
------- ------
----------------- -------
-
--------- -
-------- -----
------- --- ----- ----
-修改后，结果如下图所示：
可以看到，div 元素的宽度和高度都是 200 像素和 100 像素，而 div.inner 的宽度和高度等于 div 元素的宽度和高度。这是因为我们已经设置了元素使用 border-box 计算宽度和高度。
6. 总结
通过本文的介绍，我们可以发现，使用 box-sizing 属性进行设置非常有用，可以避免布局混乱的问题。同时，使用 CSS Reset 库可以让我们更加方便地处理这个问题。需要注意的是，要保持整个网页中各个元素的 box-sizing 属性值一致，以防止出现计算错误的情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64795b83968c7c53b0562cc9