CSS 盒子模型（Box Model）

• 盒模型由content（内容区域），padding（内边距），border（边框），margin（外边距）组成。
• 有两种标准，一种是标准盒子模型（W3C盒子模型），另一种是IE盒子模型（怪异盒子模型）。
• 当对一个文档进行布局的时候，浏览器的渲染引擎会根据这两个标准的其中一个将所有元素表示为一个个矩形的盒子。
• 这两种标准对 height 和 width 的计算方式不同，标准盒子模型只包括 content，IE盒子模型为 content + padding + border 。
• 可以通过CSS属性 box-sizing 来对这两种标准进行切换，当值为 content-box 时为标准盒子模型，值为 border-box 时为IE盒子模型。