很惭愧，才第一次看到 box-sizing 这个CSS属性，查找了 box-sizing 相关知识点，很多都是讲述 box-sizing 这个属性是什么意思，但是这个属性用在哪里？为什么要用这个属性？怎么用好这个属性？这样的资料找了半天才找到一篇，不过这一篇文章写得是非常不错，我这里给上链接：css3 box-sizing属性详解，这篇文章是转自W3CPLUS的，可是原始的文章现在居然是要付费才能看了，唉，文章确实不错，但是这个付费就不太好了。
所以在这里，我并不进一步讲 box-sizing 这个属性怎么回事，看上面的文章写得清清楚楚了，这篇文章只是对其中的一些做一些解释。
首先看一段示例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>box-sizing</title>
</head>
<body>
<div style="margin: 0 auto;width: 700px;font-size: 30px;">在chrome浏览器下，出现了2种盒子模型</div>
<form>
1，<input style="width: 100px;">
<pre style="display: inline-block;font-weight: bold;margin-left: 10px">
＆lt;input style="width: 100px;"＆gt;：W3C盒子模型
</pre>
<br><br>
2，<input style="width: 100px; border: 20px solid black;">
<pre style="display: inline-block;font-weight: bold;margin-left: 10px">
＆lt;input style="width: 100px; border: 20px solid black;"＆gt;：W3C盒子模型
</pre>
<br><br>
3，<input style="width: 100px;" type="submit" value="aaa">
<pre style="display: inline-block;font-weight: bold;margin-left: 10px">
＆lt;input style="width: 100px;" type="submit" value="aaa"＆gt;：IE盒子模型
</pre>
<br><br>
4，<input style="width: 100px; border: 10px solid black;" type="submit" value="aaa">
<pre style="display: inline-block;font-weight: bold;margin-left: 10px">
＆lt;input style="width: 100px; border: 10px solid black;" type="submit" value="aaa"＆gt;：IE盒子模型
</pre>
<br><br>
5，<select style="width: 100px; border: 10px solid black;">
<option>aaa</option>
</select>
<pre style="display: inline-block;font-weight: bold;margin-left: 10px">
＆lt;select style="width: 100px; border: 10px solid black;"＆gt;
＆lt;option＆gt;aaa＆lt;/option＆gt;
＆lt;/select＆gt;
：IE盒子模型
</pre>
</form>
</body>
</html>
上面代码块中的html拷贝后，需要将其中全角的＆转为半角的&，下面是截图显示：
可以看到，在同一个浏览器下面居然同时出现了2种盒子模型，从上面的文章中可以看到，form表单中的有些元素比如
<submit>,<select>
默认还是IE盒子模型，所以第一个用法：在表单的某些元素中指定 box-sizing 是什么，明确指定，如此不会混淆。第二个用法：用在布局中，上文中的例子已经说得非常仔细易懂了，这里不再重复。
再接着上面那个例子，加入 bootstrap.css ，如：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
截图显示如下：
因为bootstrap.css中包含如下定义：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
所以，bootstrap从一开始就约束 boxmodel 为IE的盒子模式，如此就统一了标准，非常棒。
另外，不用 box-sizing 也是可以的，就是在调整大小的时候，就是要麻烦一些，但是也能做到。