一、 属性介绍
CSS最重要的一个概念是盒子模型。它控制着页面这些元素的高度和宽度。
盒子模型一般包括四个部分，分别是content（内容），padding（内边距）、margin（外边距）以及border（边框）。
width、height属性通常用于设置元素的宽度、高度，而box-sizing属性可以决定元素的宽高是否随着边框和内边距的内容而改变。
二、话不多说，代码上看效果
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
div {
color: #fff;
font-size: 15px;
text-align: center;
}
.parent {
width: 500px;
height: 500px;
border: 5px solid red;
padding: 20px;
}
.child1 {
width: 300px;
height: 100px;
box-sizing: border-box;
background-color: rgb(55, 228, 156);
border: 5px solid grey;
padding: 10px;
margin: 10px;
}
.child2 {
width: 300px;
height: 100px;
box-sizing: content-box;
background-color: rgb(230, 170, 42);
border: 5px solid grey;
padding: 10px;
margin: 10px;
}
</style>
<body>
<div class="parent">
parent element
<div class="child1">child1: box-sizing:border-box</div>
<div class="child2">child2: box-sizing:content-box</div>
</div>
</body>
</html>
效果如图：
如图可看出，child1元素的最终宽度仍然是300，而child2最终的宽度变成了330
child1总宽度:300px(初始设置宽度值)
child1内容宽度:300px(初始设置宽度值)-5px * 2（边框）-10px * 2(内边距)=270px
child2总宽度：300px(初始设置宽度值)+5px * 2（边框）+10px * 2(内边距)=330px
child2内容宽度：300px(初始设置宽度值)
三、分析比较
box-sizing：border-box
当在盒子有宽度的前提下，元素的总宽度包含内边距（padding）和边框（border）,无论四个区域如何变化，元素整体的宽度是不变的，依旧是一开始在css中设置的宽度。
盒子的总宽度=width
内容区域的宽度=width-padding-border
box-sizing：content-box
当前属性的默认值，当在设置盒子的宽度和高度的情况下，改变盒子的内边距（padding）和边框（border），元素整体的宽度都会随着内边距和边框的值而随之改变
盒子的总宽度=width+padding+border
内容区域的宽度=width
