盒子模型

盒子模型
margin + border + padding + content
注意：盒子实际的大小和盒子占位大小不一样
实际大小就是浏览器能看到的大小。

盒子实际宽度大小 = 内容区域高度（设置的width）+ 内边距padding（padding-left +padding-right）+边框border（border-left + border-right）

盒子实际高度大小 = 内容区域高度（设置的height）+ 内边距padding（padding-top +padding-bottom）+边框border（border-top + border-bottom）

box-sizing：border-box; 是吧盒子变成IE传统下盒模型，省去修改border、padding和width的计算

content-box	默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height
bordr-box	重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）
inhert	使元素继承父元素的盒模型模式

可以看这个：https://blog.csdn.net/acf961123/article/details/103294689
https://blog.csdn.net/vanarrow/article/details/105777761