box model

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

组成

1. content：盒子的内容，通常由文本、图片、视频等组成
2. padding：内边距，盒子的内容与边框之间的距离， 受盒子的background属性影响
3. border：边框，盒子的边框，由粗细、样式、颜色三部分组成
4. margin：外边距，盒子与盒子之间的距离， 在元素外创建额外的空白，空白通常指不能放其他元素的区域

类型

W3C 标准盒子模型
elementArea = width/height + padding + border + margin

• 元素的width/heigth属性指的是元素的内容区域的宽度/高度，不包含padding、border、margin。

IE 怪异盒子模型
elementArea = width/height + margin

• 元素的width/heigth属性指的是元素的内容区域的宽度/高度，包含padding&border 不包含 margin。

Box-sizing

CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

取值：

• content-box：默认值，标准盒子模型
• border-box：IE 怪异盒子模型
• inherit：继承父元素的 box-sizing 属性