box-sizing 属性有两个常用的值：
1. content-box（默认值）: 元素的宽度和高度仅包括内容区域，不包括边框和内边距。这意味着当你设置元素的宽度和高度时，是设置内容框的大小。
2. border-box: 元素的宽度和高度包括内容区域、内边距和边框。这意味着当你设置元素的宽度和高度时，实际上是设置了整个框模型的大小。
示例：
/* 使用 content-box，宽度和高度只包括内容区域 */
.element {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid black;
/* 实际宽度计算为：内容宽度 + 左右内边距 + 左右边框 */
}
/* 使用 border-box，宽度和高度包括内容区域、内边距和边框 */
.element {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
/* 实际宽度计算为：设置的宽度值，包括左右内边距和左右边框 */
}
box-sizing 在响应式设计和布局中很有用，因为它可以简化对元素大小的计算，特别是在处理边框和内边距时。默认情况下，box-sizing 的值是 content-box，但在一些 CSS 框架中，border-box 被广泛用来更方便地管理元素的大小。
转载请注明出处：http://www.zyzy.cn/article/detail/4157/CSS