什么是CSS盒模型？box-sizing又是什么？
什么是CSS盒模型？
在我们的网页中，我们的HTML的布局都是通过盒子完成的，div就是其中之一，它的组成部分包含了从内到外，依次是内容区域、内边距（padding）、border（边框）、外边距（margin），我们的盒子就是由此四部分组成。整个HTML就是由各种盒子组成
box-sizing又是什么，有什么用
接下来我们看张图片，下面这张图片我给CSS样式是
padding: 20px;
width: 200px;
height: 200px;
background-color: red;
border: 5px solid black;
margin: 30px;
通过上面这张图我们很清晰看到了一个盒子的组成结构，就是我上面说到的组成部分。然后我们在仔细观察下，很明显发现这个宽度为什么是250，而不是我们设置的200？
这个就是box-sizing的原因了，box-sizing属性有两个值，一个是content-box，它表示我们在CSS里面给的宽高标识的是内容区域的宽高。另外一个是border-box，它表示CSS里面给的宽高属性是从边框内部开始计算。
当我们没有设置 box-sizing属性的时候，默认就是content-box，所以才会出现我们设置的宽度是200，实际上的盒子宽度缺失250，因为它的计算逻辑是 200（内容宽度）+ 20×2（左右边距） + 5×2（盒子边框） = 250
当我们没有设置 box-sizing属性为border-box，很明显发现整体的宽高都是固定200，如下图，与此同时我们的内容区域的宽度就变成了 200 - 20×2 - 5×2 = 150
