CSS盒模型

CSS盒模型本质上是一个盒子，包含元素内容、边框、内边距、外边距属性，分为标准盒模型和怪异盒模型。

1、标准盒模型
设置box-sizing：content-box；
标准盒模型总宽度Width = content + 左右padding + 左右border + 左右margin
标准盒模型的总高度Height = content + 上下padding + 上下border + 上下margin

2、怪异盒模型（IE盒模型）
设置box-sizing：border-box；
怪异盒子的宽高不但包括 内容高度，还包括padding内边距和border边框，也就是为元素指定的任何内外边距都在已经设定好的宽度和高度内部进行绘制，通过已设定的宽度分别减去边框和内外边距，才能得到内容的宽度和高度

怪异盒模型总宽度Width = content + 左右padding + 左右border
怪异盒模型总高度Height = content + 上下padding + 上下border