box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度
盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。
- 标准盒模型 box-sizing: content-box
content-box:
width = content width;
height = content height
- IE盒模型 box-sizing: border-box
border-box:
width = border + padding + content width
heigth = border + padding + content heigth
两个div均统一设置属性，然后针对第二个div设置了其box-sizing属性，并赋值为border-box。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 50px;
height: 50px;
margin: 10px;
padding: 10px;
border: 10px solid #888;
}
#bs{
box-sizing: border-box;
}
</style>
</head>
<body>
<div></div>
<div id="bs"></div>
</body>
</html>
效果如下：
关于box-sizing表格如下：
| box-sizing属性值 | 浏览器说明 | 示例 |
|---|---|---|
| 不设定 | 默认 |  |
| border-box | IE8+，其他浏览器最新版均支持 |  |
| content-box | IE8+，其他浏览器最新版均支持 |  |
| padding-box | 仅火狐浏览器 |  |
参考：https://blog.csdn.net/qinshenxue/article/details/17753005