盒模型
盒模型是什么
浏览器在渲染元素的时候回把它渲染成一个类似矩形盒子一样的东西，这个盒子有内容、内边距、边框、外边距及它们的颜色、背景等。而浏览器的渲染引擎在渲染元素的时候，会根据所设置的盒模型类型渲染成不同的盒子模型，不同的盒模型有不同的表现形式。
外边距 - 边框- 内边距 - [内容] - 内边距 - 边框 - 外边距
盒模型的类型
改变一个元素盒模型的类型可以使用 box-sizing 属性，box-sizing: content-box; 或者 box-sizing: border-box;
标准盒模型：content-box
标准盒模型是默认的盒模型，当你为这个元素设置高度或宽度时，你所设置的宽高只会作用在元素的内容(content)上。也就意味着如果这个元素包含于内边距或边框，则最终绘制出来的元素宽度会大于你所设置的宽度，因为它仅设置在元素的内容宽高上。
计算公式： width = 内容宽度height = 内容高度
IE 盒模型：border-box
IE 盒模型，早期 IE 浏览器所用的盒子表现形式。给 box-sizing 的元素设置宽度、高度的时候，这个所设的宽高包括了 内容、内边距和边框，但不包括外边距。当浏览器文档处于 Quirks (怪异) 模式时，也使用这个盒模型。填充和内边距在盒子内部。
比如说你给一个元素设置 宽度 为 100px，那么这 100px 里面除了内容之外还会包含这个元素的 border 和 padding，而实际的内容宽度则是 100px - padding 的宽度和 border 的宽度。
计算公式： width = 内容宽度 + padding 宽度 + border 宽度height = 内容高度 + padding 高度 + border 高度
何时使用
布局的时候，通常会采用 border-box 盒模型来布局，因为 content-box 盒模型当你调整一个元素的宽高的时候，要时刻注意这个元素的内边距和边框，挺麻烦的。