盒子组成分为四个部分: margin（外边距）、border(边框)、padding(内边距)、content(内容)。

盒子大小指的是盒子的宽度和高度，计算如下：

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

代码转化显示为

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

特殊情况下

盒子的宽度和高度计算由box-sizing属性来控制

box-sizing:border-box/content-box/inherit

有三个属性值

content-box：默认值 ，也就是标准盒子模型，就是说将width和height应用到元素的内容框，在之外绘制元素的内边距、外边距、边框。

border-box：IE盒子模型，就是说width和height决定了元素的边框盒，在之内绘制元素的内边距、外边距、边框，拿到内容的宽高需要分别减去边框、内边距

inherit:从父元素基础box-sizing属性的值

标准盒子模型

.div{
		box-sizing: content-box;
		width: 100px;
		height: 100px;
		background: gainsboro;
		border: 10px solid gold;
		padding: 10px;
		margin: 10px;
		}

.div{
		box-sizing: border-box;
		width: 100px;
		height: 100px;
		background: gainsboro;
		border: 10px solid gold;
		padding: 10px;
		margin: 10px;
		}

IE盒子类型