什么是盒子模型？

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基 础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）

盒子模型由内容(content)、填充(padding)、边界(margin)、 边框(border)构成

盒子模型有两种：W3C标准盒子模型，IE 怪异盒子模型，IE的content部分把 border 和padding 计算了进去，默认情况下，盒子模型为W3C 标准盒子模型

W3C标准盒子模型：

盒子总宽度 = width + padding + border + margin;

盒子总高度 = height + padding + border + margin

IE 怪异盒子模型：

盒子总宽度 = width + margin;

盒子总高度 = height + margin;

Box-sizing：定义了引擎应该如何计算一个元素的总宽度和总高度

content-box 默认值，元素的 width/height 不包含padding，border，与标准盒 子模型表现一致

border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一 致