box-sizing是干啥的？css盒模型与border-sizing在响应式布局的妙用
一、css基础框盒模型（CSS basic box model）：
标准盒模型（w3c盒模型），主要由内容（content）、填充（padding）、边界（margin）、边框（border）四个部分组成。内容（content）在CSS中其主要作用的属性是width和height。
CC盒模型各组成部分示意图。
CSS box-sizing属性
与css盒模型有关的一个值得注意属性是box-sizing。通常box-sizing的默认值是content-box，而他还有另一个值border-box。content-box中，属性width，height只包含内容content，不包含border和padding。border-box中，属性width，height则包含content、border和padding。
有关计算公式
// content-box 的宽高计算
box-sizing:content-box
width = width；height = height
// border-box 的宽高计算
box-sizing:border-box
width = width + padding + border；height = height + padding + border
二、box-sizing在响应式布局上的妙用。
box-sizing的值设置为border-box的好处
在做响应式布局时，有时我们会为一像素的边框以及内边距的计算而烦恼，而将box-sizing设置border-box可以较好的解决元素尺寸因为padding或border而超出预期问题。因为在border-box中，width和height包括了content、border和padding。知乎首页的布局也有用到这个属性。
顺带一提的“IE盒模型”
此外，因为低版本IE中，元素盒子的box-sizing默认是border-box，因此也有盒模型分为标注盒模型（box-sizing:content-box）和IE盒模型（box-sizing:border-box）的说法。但需要注意的是，IE9+中box-sizing的默认值也是content-box，且可以自行切换。
三、小结
content-box：向外扩展，总尺寸变大。
border-box：向内收缩，总尺寸固定。
优先使用 border-box 可以简化布局计算，减少意外的尺寸溢出问题。
border-box，它让元素的宽度和高度包含了内容、内边距和边框。这时候设置width:100px，不管padding和border是多少，元素的总宽度都是100px，内容区域会自动调整。比如同样的例子，padding和border会从100px里扣除，内容区域变成100 - 10 * 2 - 2 * 2 = 76px。这样布局更容易控制，特别是响应式设计中，元素尺寸不会因为padding或border而超出预期。
四、box-sizing的效果demo。
如下图所示，可以非常直观的感受到，border-box和content-box的区别。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两个宽高、边框、内边距大小都相同，但box-sizing不同的盒子</title>
<style>
.box{
width: 200px;
height: 200px;
border: 20px solid #000000;
padding: 20px;
margin-bottom: 50px;
background: #3845e9;
}
</style>
</head>
<body>
<h1>两个宽高、边框、内边距大小都相同，但box-sizing不同的盒子。</h1>
<div style="box-sizing:content-box;" class="box">content-box;</div>
<div style="box-sizing:border-box;" class="box">border-box;</div>
</body>
</html>
