简介
当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。
盒模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。
box-sizing
在W3C标准下，我们定义元素的width值即为盒模型中的content的宽度值，height值即为盒模型中的content的高度值。
因此，标准盒模型下：
元素的宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
而IE怪异盒模型（IE8以下）width的宽度并不是content的宽度，而是border-left + padding-left + content的宽度值 + padding-right + border-right之和，height同理。
因此，在怪异盒模型下：
元素占据的宽度 = margin-left + width + margin-right
虽然现代浏览器默认使用W3C的标准盒模型，但是在不少情况下怪异盒模型更好用，于是W3C在css3中加入box-sizing。
1 | box-sizing: content-box // 标准盒模型 |