/* 定义元素的盒子模型为border-box，即元素的宽度和高度包括内边距和边框 */
.box {
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #000;
}
/* 定义元素的盒子模型为content-box，即元素的宽度和高度只包括内容盒子 */
.box {
box-sizing: content-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #000;
}box-sizing属性有两个值可选：
- content-box：元素的宽度和高度只包括内容盒子
- border-box：元素的宽度和高度包括内边距、边框和内容盒子
使用box-sizing属性可以方便地控制元素的尺寸，特别是在做响应式布局时非常有用。比如，在移动端开发中，大家可能需要把某个元素的宽度设置为屏幕宽度的50%，这时候就可以使用box-sizing:border-box，这样元素的实际宽度就是屏幕宽度的50%，不需要再考虑内边距和边框的影响。