box-sizing布局（简要介绍）

盒子模型

真正的盒子的宽高 等于 padding + border + width （不关margin事）
有时候已经写好的一个盒子给了固定宽高，后续要添加padding和border且让盒子保持原先宽高，则需要重设盒子的width和height减去由padding和border带来多余的宽高

box-sizing

box-sizing有三个属性值: content-box | border-box | inherit;

• 第一个content-box是我们一开始所说的那种浏览器默认的盒子计算方式，也就是padding + border + width （不关margin事）
  
• 第二个属性值是用来替换盒子计算宽高方式的属性，border-box,顾名思义，这个属性是以border为界限计算，盒子的宽度固定为width和height设置好的数值，添加padding和border只会去占用已经设置好的width和height内部的空间，不会再往外面生长，（同样的，这个border-box,也不关margin的事）
• 第三个属性值，inherit，继承，可以继承父盒子的盒子计算方式，但是box-sizing不会像color等属性给后代元素自动继承。