关于CSS重要的一个概念就是CSS盒子模型。它控制着页面这些元素的高度和宽度。盒子模型多少会让人产生一些困惑，尤其当涉及到高度和宽度计算的时候。
因为盒模型宽高计算方式有两种，对应box-sizing的两种模式：content-box，border-box
在CSS中，你设置一个元素的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。
box-sizing 属性可以被用来调整这些表现：
content-box（传统盒模型，有问题的盒模型）
padding+border+width= 盒子的宽度padding+border+height= 盒子的高度
border-box（不受干扰的盒模型）
- width = border + padding + 内容的width
- height = border + padding + 内容的 height
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing