box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框，看这官方的定义，可能看不懂，不要急，看下面的例子：

我们先写2个盒子box和box1,box比box的css多了一个box-sizing:border-box的值，我们之间看浏览器渲染的结果，对比一下区别，如下图：

css代码： 

.box{margin: 0 auto;width: 100px;height: 100px;line-height: 100px;text-align: center;padding: 10px;border: 3px dashed #111;box-sizing:border-box;}
.box1{margin: 0 auto;width: 100px;height: 100px;line-height: 100px;text-align: center;padding: 10px;border: 3px dashed #111;}

css3属性关于“box-sizing”的笔记-QUI-Notes

我们发现box的总宽度和总高度还是100*100，行高100px也导致“哈哈哈”向下移动了-这是顶部的填充导致的文字下移，这就是我们加入了box-sizing:border-box之后的效果！
继续看box1，发现其总宽度126px=盒子宽度100px+边框宽度6px+padding宽度20px，总高度也是这样...

总结起来，就是添加了box-sizing:border-box之后，盒子的总高度宽度始终不变，填充边框都在box里面了，传统的盒子模型被打破！

box-sizing: content-box|border-box|inherit;

  1. content-box——这是由 CSS2.1 规定的宽度高度行为。 
  2. border-box——为元素设定的宽度和高度决定了元素的边框盒。
  3. inherit——规定应从父元素继承 box-sizing 属性的值