Box Model - CSS 框框模型 [2*]
Box Model (框框模型) 是什么？
- 说明：css box model 描述出文件中，元素 (elements) 所形成的最基本矩形区域 (boxes) 及专有名词；此为呈现视觉性 (visual) 版面的重要基础。
- 适合：有 html 及 css 语法基础概念者。
- 难度：
![等级2]( "分成1~5等级，愈大难度愈高。")
- 更新：
只要有东西在版面上描绘 (可以把版面想成一张空白的纸) ，就一定会占有版面上某些空间，纵使是一个字，也至少就占了一个字的矩形区域，而这样的区域被定义为「框」 (boxes) 。
文件内某「一个」元素的「框」 (box) 可由四个层叠的 (nested) 区域所组成：该元素所包含的「内容」 (不论是单纯的文字，或是其它元素) 形成最内层的区域，就是 content area (内容区) ，依序向外一层一层围绕为 padding area, border area, margin area (补距区 - 边线区 - 边距区) 。
区与区之间可分别由 css 指定 padding, border, margin 特性 (property) 来改变相互的距离，而每种特性定义都有上下左右四向，可由版面设计者指定各不相同的距离 (说成是厚度、宽度也可以) ，当然也可以没有距离，运用这样的概念进而改变版面上整组 box 的尺寸及呈现。
由内向外四个区都各自有「四边」形成紧邻的框，标准的名称依序为： ₪
- content edge or inner edge (内缘-图中绿线)
- 具有宽 (
width) 及高 (height) 的 content area 四边，与 padding area 交界处；四边围成的区域称为 content box 。 - padding edge (补距外缘-图中红线)
- padding area 四边，与 border area 交界处；四边围成的区域称为 padding box 。
- border edge (边线外缘-图中蓝线)
- border area 四边，与 margin area 交界处；四边围成的区域称为 border box 。
- margin edge or outer edge (框外缘-图中深灰线)
- margin area 四边，也是整个框 (box) 的最外缘；四边围成的区域称为 margin box 。
对 margin box 来说，永远呈现透明 (因此能看到其背后的内容)；在元素上定义背景 (background) 呈现在 border box, padding box, 及 content box 的区域内。而 content box 的「内容」当然是呈现在背景的前面。
- 参考资源
- CSS basic box model - w3c 官方文件 (英文) 。
散布、展示请参阅 Creative Commons 授权条文，禁止重混，引述请增加原文连结。
思考 - Box Model 与 css 版面视觉设计
Box 在版面编排上可以说是无所不在，就算「内容」 (content) 是单单一个字都具有 box，占有一小块矩形区域；当然，也能由 css 个别指定不同的
padding,border,margin。如果padding,border,margin的距离都是「零」，那么当然， padding box, border box, margin box 的大小就会与 content box 所拥有的宽高一样。许许多多字的 Box 就如同「堆积木」，一个个相邻著由上而下堆叠起来 (书写方向为由左向右、由上至下时)，将内容有规则地分布在版面上，而这个规则就是设计者以 css 定义的呈现方式。
行内层级 (inline-level) 与区块层级 (block-level) 呈现模式不同
许多的「字」结合起来可以产生「段落」，段落则再形成更大的矩形 box ，将文字围绕起来。
xhtml<p>看到竹子想到王阳明。看到桃花想到桃花源记。看到莲花想到周敦颐。<em>看到荷花想到何仙姑。看到玫瑰想到爱神。看到菊花想到陶渊明。</em>看到百合想到香水。～节录自 monica 「联想的游戏」
</p>
元素
p代表段落，一般以区块层级 (block-level) 方式呈现，会是一个「独立」的矩形 box ，可特别称为 block boxes (图中绿线) 。而p所包含的「内容」 (content) 可想像成，由「三节」行内层级 (inline-level) 或文字层级 (text-level) 的文字组成，三个行内层级元素 (inline-level emements) 当然都有自己的 box ，可特别称为 inline boxes ，以一个个「自动紧接」的方式呈现，与 block boxes 围成「一区」的矩形不尽相同。1 与 3 只是文字，属于文字层级 (text-level) 元素，虽然有「自然产生」的 inline boxes ，不过由于没有赋予特定的元素名称，也可称为「不具名 (anonymous) 元素」，所以无法经由 css selectors 为其指定
padding,border,margin等；而 2 因为已被指定成em元素 (行内层级元素) ，就可以由设计者定义。行内层级元素无法容纳在一行内时， inline boxes 就会拆断成二行或是数行，范例中的 em 元素就可能拆成二行或是三行的矩形框 (图中蓝线)，不再是标准的一块矩形而已了。 inline boxes 的「左边」在该元素第一行起始的左方，「右边」在最末行结尾的右方，所以如果指定「左或右」的
padding,border,margin时，只会在第一行和最末行作用，不会在各分行的「拆断处」产生；指定「上或下」会在各行产生 (当然，依据margin规则，定义「上或下」不会作用在「不可替换」行内元素 (non-replaced inline elements)) 。抽象的 line box 因 inline boxes 而产生
line box 像是抽屉，也像骨架一般，将行内元素分成一层一层「收纳」，如前例 (图中红线)，一层放不下就会转到下一层。通常会看到行与行之间其实会有些许的空隙，不只是「字」的高度而已，这就是 line box 这个抽屉的高度，并不是 inline box 的高度。所以，实际上 inline boxes 是存在于一行一行抽象的 line box 里，而 line box 一行行叠成区块层级元素 (如前例的
p) 。 line box 由上向下，一行紧邻著一行，而且永远不会相互重叠。line box 与前面所讲的 box 不同， line box 是因行内元素所产生的抽象空间，只是区块层级元素 (block-level elements) 的 box model 一部分而已，不是真实的元素，所以也不可能为其指定 box 的各项数值 (如
width,height,padding,border,margin等) 。 line box 的宽度根据其容纳区 (containing block) 所决定，而高度则由 cssline-height或vertical-align的定义来决定。多重的 block boxes 像洋葱一层包著一层
实际上，每一个区块层级元素 (block-level elements) ，必然会由另一个区块层级元素包围，根元素除外 (root element, html 文件指的就是
html元素) ，所以，许多个 block boxes 一层一层包围起来时就好似洋葱的构造。xhtml<blockquote><h1>联想的游戏</h1>
<p>看到三国演义想到七侠五义。看到红楼梦想到牡丹亭。看到山海经想到镜花缘。看到芭蕉扇想到铁扇公主。看到猪八戒想到沙悟净。看到孙悟空想到如来佛。看到史记想到司马迁。看到船想到孔明借箭。看到满山秋色想到最爱的诗人王维。看到赤子纯真一般的画想到丰子恺。看到李叔同想到大护法夏丏尊。～节录自 monica 「联想的游戏」</p>
</blockquote>
很明显地，
h1,p,blockquote都是区块层级元素。h1与p的「内容」 (content) 仅包含著行内层级的元素，就像前面一样，两者各自拥有矩形的 block box ，也都可以各自指定padding,border,margin(图中红线) 。而blockquote从外包围著h1与p，h1与p成了blockquote的「内容」 (content) ；blockquote形成另一个 block box (图中绿线) ，当然也可以指定 box 的各项数值。