css标准盒子模型

css盒子模型又称为框模型(Box Model），包含了元素内容(content)、内边距(padding)、边框(boder)、外边距(margin)几个要素。当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型，将所有元素表示为一个个矩形的盒子(box).CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…如下图：

• content区域：容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。它的尺寸为内容宽度（或称 content-box 宽度）和内容高度（或称 content-box 高度）。它通常含有一个背景颜色（默认颜色为透明）或背景图像。

• padding区域：负责延伸内容区域的背景，填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度 和 padding-box 高度。

• boder区域：是容纳边框的区域。其尺寸为 border-box 宽度 和 border-box 高度。

• margin区域：用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度 和 margin-box 高度。

• 元素框的总宽度=width+(padding-left)+(padding-right)+(border-left)+(border-right)+(margin-left)+(margin-right);

• 元素框的总高度=height+(padding-top)+(padding-bottom)+(border-top)+(border-bottom)+(margin-top)+(margin-bottom);

IE盒子模型

• 元素框的总宽度=width（padding-left+padding-right+border-left+border-right)；

• 元素框的总高度=height（padding-top+padding-bottom+border-top+border-bottom）;