css3 box-sizing

关于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

　　　　　https://www.jianshu.com/p/e2eb0d8c9de6