前言
在前端开发中，CSS Reset 是一个必不可少的工具，它会将各种浏览器默认的样式清除掉，以便更好地控制页面的样式。其中，box-sizing 属性便是 CSS Reset 中的一个关键属性，它在页面中的布局和样式调整中扮演了重要的角色。本文将详解 box-sizing 属性的含义、用法、问题及解决方法。
box-sizing 属性的含义
在默认情况下，CSS 的盒模型是采用 content-box 模式进行布局，也就是说，一个 HTML 元素的宽度只包括内容的宽度，而不包括边框（border）和内边距（padding）的宽度。这样的布局方式会导致很多布局上的问题，例如限制了元素的最小宽度、SVG 图片的渲染大小等。
而 CSS3 引入的 box-sizing 属性可以用来改变盒子宽度的计算方式，提供了两种计算模式：content-box 和 border-box。其中，content-box 模式为默认模式，而 border-box 模式则可以将元素的宽度和高度包括 border 和 padding 的大小。
box-sizing 属性的用法
box-sizing 属性可以用在所有的 HTML 元素上，其语法为：
/* 默认值 */ box-sizing: content-box; /* 包含 border 和 padding 的值 */ box-sizing: border-box;
我们可以在全局样式中设置，以便于后续的样式调整。例如：
/* 设置全局 box-sizing 为 border-box */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}这样，所有的 HTML 元素的盒模型都会改为 border-box。
在 CSS Reset 中应用 box-sizing
在实际的开发过程中，我们需要在 CSS Reset 中使用 box-sizing。以下是一个常见的 CSS Reset 样式：
// javascriptcn.com 代码示例
/* CSS Reset */
* {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: 100%;
height: auto;
}这样的 CSS Reset 会清除所有的 margin 和 padding，但是没有设置 box-sizing。虽然这并不会导致样式上的问题，但是会引发布局上的错误，因此我们需要在 CSS Reset 中添加 box-sizing 的设置：
// javascriptcn.com 代码示例
/* CSS Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: 100%;
height: auto;
}这样，我们的 CSS Reset 中便包括了 box-sizing 属性的设置。
box-sizing 属性的问题及解决方法
在使用 box-sizing 属性的时候，我们需要注意以下几个问题：
1. 盒模型的兼容性问题
由于 box-sizing 属性是 CSS3 标准中的属性，不同的浏览器对其支持程度不同。在 IE6、IE7 等早期版本的浏览器中，box-sizing 属性并不支持。因此，在使用 box-sizing 属性时，需要加上针对各种浏览器的前缀。
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
2. 设置 box-sizing 后导致的宽度问题
在默认的 content-box 模式下，HTML 元素的宽度由内容、padding、border 三部分共同决定，因此受到相对的限制；而在 border-box 模式下，HTML 元素的宽度包括了 padding 和 border 的宽度，因此会有更多的空间可以自由调整，但是也会有可能导致宽度的限制问题。例如：
// javascriptcn.com 代码示例
/* 默认是 content-box */
input[type="text"] {
width: 200px;
padding: 10px;
border: 1px solid #ccc;
}
/* 改为 border-box 后 */
input[type="text"] {
width: 200px;
padding: 10px;
border: 1px solid #ccc;
box-sizing: border-box;
}以上代码中，当 input 元素的盒模型为 content-box 时，元素的宽度是 222px（222=200+10x2+1x2）。当我们将其改为 border-box 时，元素的宽度为 200px，但是 padding、border 的宽度也已经包括进来，因此实际的文本输入区域宽度只有 178px，因此需要对宽度做调整。
3. box-sizing 的应用范围问题
box-sizing 属性只对 box 类型的元素有效，也就是说，只有元素的 display 属性值为 block、inline-block、table-cell、table-caption、grid 等，才能应用 box-sizing 属性。如果元素的 display 为 inline 或者 none，是不支持 box-sizing 属性的，因此我们需要将元素的 display 属性设置为支持 box-sizing 的类型。
总结
通过本文的介绍，我们可以深入了解 box-sizing 的定义及用法，这将帮助我们更好地在前端开发中进行页面布局和样式调整，还可以解决不同浏览器之间的兼容性问题。在 CSS Reset 中设置 box-sizing 属性是必不可少的，同时，我们也需注意 box-sizing 的局限性，避免出现宽度限制等问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654043d17d4982a6eb9c14e6