box-sizing：它是css3的box属性之一
定义：允许你以特定的方式定义匹配某个区域的特定元素
值：content-box，border-box，inherit
content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。
border-box：为元素设定的宽度和高度决定了元素的边框盒，为元素指定的任何内边距和边框都将在已设定的宽度和高度内部绘制。
inherit：继承父元素的box-sizing的值；
box-sizing既然是box的属性之一，那么它当然也要遵循css的Box Model原理，我们要先了解一些Box Model的原理。
Box Model：Box Model分为两种，第一种是W3C的标准模型，另一种是IE的传统模型，他们的相同之处都是对元素计算尺寸的模型，不同之处在于计算的方式不同。
W3C的标准模型：
外盒尺寸计算：
Element空间高度：content height + padding + border + margin；
Element空间宽度：content width + padding + border + margin；
内盒尺寸计算：
Element空间高度：content height + padding + border；（Height为内容高度）；
Element空间宽度：content width + padding border；（Width为内容宽度）；
传统Box Model：
外盒尺寸计算：
Element空间高度：content Height + margin（Height包含了元素的内容高度、边框高度、内距高度）；
Element空间宽度：content Width + margin（Width包含了元素的内容宽度、边框宽度、内距宽度）；
内盒尺寸计算：
Element空间高度：content Height（Height包含了元素的内容高度、边框高度、内距高度；
Element空间宽度：content Width（Width包含了元素的内容宽度、边框宽度、内距宽度）；
浏览器兼容性问题
现代浏览器都支持，但是IE家族只有IE8以上才支持，但是有些浏览器还要加上前缀，Mozilla需要加上-moz-，webkit内核需要加上-webkit-，presto内核需要加上-o-，IE8 -ms-。
来源：https://www.cnblogs.com/Dream2317201116/p/7859757.html