# 10 視覺格式化模型詳解
> by [binlv](https://binlv.top)
[TOC]
## 10.1 "containing block" 的定義
元素盒子的位置和大小有時是相對于某個矩形---元素的 **包含塊(containing block)** 來計算的。元素的包含塊的定義如下：
1. 根元素所在的包含塊是一個稱為 **初始包含塊 (initial containing block)** 的矩形。對于連續媒體，它具有視口的尺寸并錨定在畫布原點；它是分頁媒體的頁面區域。初始包含塊的'direction'屬性與根元素相同。
2. 對于其他元素，如果元素的定位(position) 是 'relative' 或 'static'，則包含塊由最近的祖先盒子的內容邊緣形成，該祖先盒子是塊容器或建立格式化上下文。
3. 如果元素具有'position：fixed'，則在連續介質的情況下由視口建立包含塊或者在分頁介質的情況下由頁面區域建立包含塊。
4. 如果元素具有'position：absolute'，則包含塊由最近的祖先以'absolute'，'relative'或'fixed'的'position'按以下方式建立：
1. 在祖先是內聯元素的情況下，包含塊是圍繞為該元素生成的第一個和最后一個內聯框的填充框的邊界框。在CSS 2.2中，如果內聯元素被分割成多行，那么包含塊是未定義的。
2. 否則，包含塊由祖先的填充邊緣形成
如果沒有這樣的祖先，則包含塊是初始包含塊。
在分頁媒體中，絕對定位的元素相對于其包含的塊被定位而忽略任何分頁符（就像文檔是連續的）。該元素隨后可能會分成幾頁。
對于絕對定位的內容，這些內容可以解析頁面以外的頁面位置（當前頁面），或者解析為當前頁面上已經被渲染用于打印的位置，打印機可以將內容
* 在當前頁面的另一個位置上
* 在后續頁面上，或
* 可能省略它
> 請注意，分成多頁的塊級元素可能在每個頁面上具有不同的寬度，并且可能存在設備特定的限制。
***一個小例子：***
~~~html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Illustration of containing blocks</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">This is text in the first paragraph...</P>
<P id="p2">This is text <EM id="em1"> in the
<STRONG id="strong1">second</STRONG> paragraph.</EM></P>
</DIV>
</BODY>
</HTML>
~~~
在沒有定位的情況下，上面例子中的包含塊（C.B.）關系如下：
| 盒子 | 對應的包含塊 |
| --- | --- |
| html | initial C.B. (UA-dependent) |
| body | html |
| div1 | body |
| p1 | div1 |
| p2 | div1 |
| em1 | p2 |
| strong1 | p2 |
如果我們對 `div1` 進行定位：
```css
#div1 { position: absolute; left: 50px; top: 50px }
```
其包含塊不再是“body”，而變成了初始包含塊（因為沒有其他定位的祖先盒子）。
如果我們也對 `em1` 進行定位：
```css
#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }
```
則對應的包含塊關系如下：
| 盒子 | 對應的包含塊 |
| --- | --- |
| html | initial C.B. (UA-dependent) |
| body | html |
| div1 | initial C.B. |
| p1 | div1 |
| p2 | div1 |
| em1 | div1 |
| strong1 | em1 |
通過定位“em1”，其包含塊成為最接近定位的祖先盒（即由“div1”生成的）。
## 10.2 "width"屬性相關說明
## 10.3 "width"和"margin"值的計算
一個元素的'width'，'margin-left'，'margin-right'，'left' 和 'right' 這些用于布局的屬性的值，取決于生成的盒子的類型和相互之間的類型。（用于布局的值有時稱為使用的值）原則上，所使用的值與計算值相同，'auto' 由一些合適的值代替，百分比基于包含塊計算，但也有例外。需要區分以下情況：
## 10.4 最小寬度 "min-width" 和 最大寬度 "max-width"
## 10.5 "height"屬性相關說明
## 10.6 "height"和"margin"值的計算
## 10.7 最小高度 "min-height" 和 最大高度 "max-height"
## 10.8 行高相關的計算： 'line-height' 和 'vertical-align' 屬性
