css盒模型由四部分组件：
content-box: 内容盒子，用于显示内容，默认通过 width 和 height 控制宽高，但如果 box-sizing（盒模型的意思）属性设置为非 content-box 值，运用的规则会发生改变。
padding Box: 内边距盒子，通过 padding 属性可以设置内边距大小。
border Box: 边框盒子，通过 border 属性可以设置边框大小及样式。
margin Box: 外边距盒子，通过 margin 属性设置外边距大小。
注意：margin不计入盒子的实际大小。盒子的背景颜色不会覆盖到margin的部分。可以把margin认为盒子之间的空气墙，是用来控制盒子间的距离的。
我们可以通过box-sizing来控制width和height被应用到哪个盒子上，下面具体来展开说一说。
标准盒模型（content-box）
浏览器默认应用标准盒模型，也可以显示设置
.box { box-sizing: content-box; }
怪异盒子模型（border-box）
怪异盒模型，也叫IE模型
IE浏览器的早期版本没有遵循css标准，width和height是用来设置border-box 的宽高，而不是content-box的宽高，导致不同的浏览器表现不同，是浏览器的bug
后来css3引入了box-sizing,让开发者可以选择使用哪种盒模型，提供更好的灵活性，通过下面的设置，我们可以将元素的盒模型设置为怪异盒模型
.box { box-sizing: border-box; }
怪异盒模型中，width和height属性用于设置border-box盒子。即使我们直接给元素对应的盒子设置了宽高，再通过padding和border,才能计算出content-box
