CSS 框模型( Box module )

框和布局

在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处。CSS 可以说是页面表现的基础， CSS 可以控制布局，控制元素的渲染。

布局是讲在电影画面构图中，对环境的布置、人物地位的调度、人物之间的关系、人物和景物的关系等的安排。大同小异，CSS 的布局也是一样。

CSS 的布局，包含两个大部分：

• 元素：元素及其组成，类似电影布局中人物的高矮胖瘦、衣着配饰等，以及场景中的桌椅板凳，物品等等。
• 定位：元素的位置， 类似电影场景的中对环境的设置，人物作为元素，他们之间的关系会影响其在场景中的位置。

总的说来，CSS 的布局比电影场景布局简单的多，因为 CSS 中要控制的元素都是死的，而人是活的有思想的（无思想的道具除外~~）。

元素和框模型

观察页面的构成元素，其中包括 SPAN DIV TABLE INPUT IMG 等等。

仔细观察每个元素，它们的形状都是矩形的，严格的说，元素形成了一个矩形的区域，这个区域就是 CSS 中最基本的布局要素， 常被称作 "box"，你可以在很多 W3C CSS2.1 规范的原文中看到 "box" 这个字眼。本篇文章要讲的主要内容， 就是关于 "box" 组成及其变化的一系列规则，也就是今天要讲的内容："Box Module"，通常被译作“盒子模型”，有的地方被译作“框模型”。 因为 W3C 的很多地方用到了 "box" 这个词，有些地方译作“盒子”不大通顺，权且统统译作“框”。

本部分主要包括两部分：框的组成以及相关特性( property )，外边距折叠( Collapsing margins )。

框的构成以及相关 CSS 特性( property )

结构

为了给文档树中的各个元素排版定位（布局），浏览器会根据渲染模型¹为每个元素生成四个嵌套的矩形框， 分别称作 content box、padding box、border box 和 margin box，它们是不可分割的，并可能会重合， 这就是 CSS 规范中描述的“框模型”（box model）。它是以 CSS 的角度去看一个元素被渲染后的抽象形态。 是一个元素自身的构成部分，不同于布局：多个元素在页面上的定位。

 
注：padding、border 和 margin 区域都包括 top、right、bottom、left 四部分。如图所示（"LM" 代表 left margin，"RP" 代表 right padding，"TB" 代表 top border……）。

上面的大框，代表一个元素生成的矩形区域( box )，每一个 box 都包括一个 content 区域（元素的内容，如文本，图形等）以及环绕其四周的 padding (元素的内边距，填充部分)、border (元素的边框) 和 margin (元素的外边距) 区域。

注：

1. 元素在页面上定位及布局的规则，包括 'position' 和 'float' 等等，详见： W3C CSS2.1 -- 9 Visual formatting model

边界

上述四个区域（content、 padding、border 和 margin）分别有他们自己的边界，细化来说，每个区域都有 top、right、bottom、left 四个边界。

• Content 边界/内边界：Content 边界环绕在由该元素的宽和高决定的一个矩形上，这个尺寸通常由该元素渲染后的内容决定。 这四个 content 边界组成的矩形框就是该元素的 content box。
• Padding 边界：Padding 边界环绕在该元素的 padding 区域的四周，顾名思义，填充背景色，在此范围内有效。如果 padding 的宽度为0， 则 padding 边界与 content 边界重合。这四个 padding 边界组成的矩形框就是该元素的 Padding box。
• Border 边界：Border 边界环绕在该元素的 border 区域的四周，如果 border 的宽度为0，则 border 边界与 padding 边界重合。 这四个 border 边界组成的矩形框就是该元素的 border box。
• Margin 边界/外边界：Margin 边界环绕在该元素的 margin 区域的四周，如果 margin 的宽度为0，则 margin 边界与 border 边界重合。 这四个 margin 边界组成的矩形框就是该元素的 margin box。