box-sizing 有两个可能的值：
1. content-box（默认值）：这是标准的盒模型。元素的宽度和高度只包括内容，不包括边框、填充和外边距。
2. border-box：元素的宽度和高度包括内容、填充和边框，但不包括外边距。这就是说，设置了 border-box 后，你指定的宽度和高度值即包含了边框和填充。
以下是一个示例：
/* 使用 content-box */
.element1 {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid #3498db;
margin: 10px;
}
/* 使用 border-box */
.element2 {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid #e74c3c;
margin: 10px;
}
在这个例子中，element1 使用了默认的 content-box，而 element2 使用了 border-box。它们的宽度和高度设置相同，但由于 box-sizing 不同，它们的最终呈现方式会有所不同。element1 的总宽度为 200px + 2 * 20px + 2 * 5px + 2 * 10px，而 element2 的总宽度为 200px，因为 border-box 将边框和填充包含在内。
选择使用哪种 box-sizing 取决于你对盒模型的需求。在一些情况下，使用 border-box 可以更方便地控制元素的尺寸，特别是在处理布局时。
转载请注明出处：http://www.zyzy.cn/article/detail/6042/CSS