什么是css盒模型

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

盒模型的组成

• content（内容区）+ padding（填充区/内边距）+ border（边框）+ margin（外边距）

两种盒模型

1. 标准W3C盒子模型

• 默认设置width即为content部分的宽度
• 现在的浏览器，包括IE6及以上使用的默认都是W3C标准盒模型

2. IE盒子模型

• 默认设置的width包含content + padding + border

- 注： 在IE6及以后，IE浏览器也使用了默认的W3C标准盒模型

设置盒模型的属性：box-sizing

• content-box 设置盒子模型 遵循 标准W3盒子模型规则
• border-box 设置盒子模型 遵循 IE盒子模型规则
• inherit 继承父元素的box-sizing属性值
• padding-box 因为兼容性不好，只有fireFox支持，chrome和IE浏览器不支持，而且W3C上也并没有列举出来，所以不做讨论。（padding-box 意思就是 content + padding）