css視覺格式化模型（visual formatting model）是用來處理文檔并將它顯示在視覺媒體上的機制。這是CSS 2.1的一個基礎概念。視覺格式化模型根據CSS盒模型為文檔的每個元素生成0，1或多個盒。每個盒的布局由如下內容組成：

盒尺寸：明確指定，受限或沒有指定
盒類型：塊級盒（block-level box），行內級別盒（inline-level box），行內盒（inline-box)，原子行內級別盒（atomic inline-level box）
定位方案（position scheme）：常規流（normal flow），浮動或絕對定位（包括absolute和fixed）
文檔樹中的其他元素：它的子節點與兄弟節點
視口（viewport）的尺寸與位置：屏幕上的一個窗口或其他可視化區域
內含圖片的固定尺寸
其他信息

一個盒子相對于它的包含塊（containing block）的邊界來渲染。通常盒為它的后代元素建立包含塊。但是盒并不受它的包含塊的限制，當它的布局跑到包含塊的外面時，稱為溢出（overflow）。

注：包含塊（containing block）定義和塊容器盒（block container box）概念不同。

盒的生成（Box generation）

CSS視覺格式化模型的一部分工作是從文檔元素生成盒。生成的盒擁有不同的類型，并影響視覺格式化模型本身。生成盒的類型取決于CSS屬性display。

1、塊級元素與塊盒（Block-level elements and block boxes）

塊級元素（block-level elements）：display為block，list-item，table

塊級盒（block-level-box）：塊級盒參與塊級格式化上下文（block formatting context）。每個塊級元素至少生成一個塊級盒，稱為主要塊級盒（principal block-level box）。一些元素，如<li>，會生成額外的盒來放置項目符號，不過多數元素只生成一個主要塊級盒。

塊容器盒（block-container box）：塊級盒中除了table box和可替換元素之外，均是塊容器盒。其他的塊級盒不是塊容器盒，如不可替換的行內塊和不可替換的table cell。塊容器盒要么只包含塊級盒（table box和可替換元素除外），要么生成一個行內格式化上下文（inline formatting context，只包含行內盒，如inline-block）。

塊盒（block boxes）：既是塊級盒，又是塊容器盒的盒是塊盒。

塊級盒和塊容器盒對比：塊級盒描述元素跟它的父元素與兄弟元素之間的關系。塊容器盒描述元素跟它的后代之間的影響。

術語：

元素：元素是文檔結構的基礎，在CSS里面，每個元素生成了包含內容的盒（box）。

可替換元素：瀏覽器根據其標簽的元素與屬性來判斷顯示具體的內容，CSS渲染模型不考慮替換元素內容的渲染，這些替換元素的展現獨立于CSS。比如：<input /> type="text" 的是，這是一個文本輸入框，換一個其他的時候，瀏覽器顯示就不一樣。(X)html中的<img>、<input>、<textarea>、<select>、<object>、<video>都是替換元素，這些元素都沒有實際的內容。<audio>和<canvas>在某些情況下也是可替換元素。

替換元素通常有其固有的尺寸：一個固有的寬度、一個固有的高度和一個固有的比率。比如一幅位圖有固有用絕對單位指定的寬度和高度,從而也有固有的寬高比率。另一方面,其他文檔也可能沒有固有的尺寸,比如一個空白的html文檔。

固有尺寸是指寬度和高度是有元素自身定義的,不受周圍元素的影響。CSS沒有定義如何去尋找替換元素的固有尺寸。在CSS 2.1中,只有替換元素可以有固有的尺寸。對于沒有可靠的解析度信息的光柵圖像,必須假定一個圖像源像素為一個px單位。

一些CSS屬性比如vertical-align可能會用到替換元素的固有尺寸或基線。

不可替換元素：替換元素之外的所有其他元素都是不可替換元素，由CSS視覺格式化模型負責不可替換元素的渲染，可以直接顯示出來。例如<div>，<p>。

1.1 匿名塊盒（Anonymous block box）

匿名塊盒是根據需要而添加的補充性盒。

情況一：請看以下代碼：

<div>
some text
<p>more text</p>
</div>

設置div和p的display為block，some text就形成了一個匿名塊盒。匿名塊盒沒有名字，也不能被CSS選中，所有的CSS屬性值為inherit，非繼承的CSS屬性值為initial。

塊容器盒要么只包含行內級盒，要么只包含塊級盒。在這種情況下，將創建匿名塊盒來包含毗鄰的行內級盒。

<div>Some inline text 
<p>followed by a paragraph</p>
 followed by more inline text.</div>

<p>前后將形成兩個匿名塊盒，包含里面的文檔。

結果:

some inline text

followed by a paragraph

followed by more inline text.

情況二：一個行內盒包含了一個或幾個塊盒。在這種情況下，包含塊盒的行內盒將拆分為兩個行內盒放置于塊盒前后，然后分別由兩個匿名塊盒包含。這樣塊盒就與其前后包含行內元素的匿名塊盒形成了兄弟關系。

如果行內盒包含多個塊盒，并且這些塊盒之間沒有夾雜內容，將在這些塊盒前后創建匿名塊盒。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>box</title>
        <style type="text/css">
            body{
                margin:0 auto;
                width:980px;
                height:1000px;    
            }
            .container{
                display:block;
            }
            p{
                display:inline;
                background-color:#FF6666;
            }
            span.block{
                display:block;
            }
            span.inline{
                display:inline;
            }
            
        </style>
    </head>
    <body>
        <div class="container">
            <p>
            This is anonymous text before the SPAN.
            <span class="block">
                This is the content of SPAN.
            </span>    
            This is anonymous text after the SPAN.
            </p>
            <span class="inline">
                inline text;
            </span>    
        </div>
    </body>
</html>

<span class="block">將產生兩個匿名塊框，如下所示：

body默認是display：block，所以body形成一個塊級盒，里面包含了<p>和<span>兩個行內元素，<p>和<span>形成了兩個不可替換內聯塊，所以body是一個塊盒。

2、行內級元素和行內盒（Inline-level elements and inline boxes）

行內級元素（inline-level elements）：display為inline，line-block，inline-table

行內級盒（inline-level boxes）:行內級元素生成行內級盒，參與行內格式化上下文（inline formatting context）。

行內盒（inline boxes）：不可替換元素（<div>，<span>），若display為inline，則會產生一個行盒。

原子行級盒（atomic inline-level boxes):行內級盒中除了行盒之外的盒，為原子級行盒，如可替換行內塊，inline-block元素，inline-table元素。

2.1 匿名行內盒（Anonymous inline boxes)

任何被直接包含在一個塊容器元素而不是行內元素中的文本，將形成一個匿名行內盒。如下代碼：

<p>some <em>emphasized</em> text </p>

p元素形成了塊盒，em形成了一個行內盒。some和text形成了兩個匿名行內盒。空白如果使用white-space去掉，則不會產生行內盒。匿名行內盒沒有名字，也不能被CSS選中，所有的CSS屬性值為inherit，非繼承的CSS屬性值為initial。

如果一個匿名盒的類型可以根據上下文來清晰界定，則匿名行內盒和匿名塊盒都可以被簡稱匿名盒。在格式化表格時，會產生更多類型的匿名盒。

3、其他類型盒

行盒（Line boxes）：行盒是由行內格式化上下文產生的盒，用于表示一行。在塊盒里面，行盒從塊盒的一邊排版到塊盒的另一邊。當有浮動時，行盒從左浮動的最右邊排版到右浮動的最左邊。

插入盒（run-in boxes）：CSS3中定義的盒，由display：run-in定義，由后續盒的類型決定是塊盒還是行盒。可以用來在一個段落中插入標題。

表格內容模型（table content model）：可以創建一個表格包裝盒（table wrApper box），也可以創建特殊盒，比如標題盒（caption boxes）。

多列內容模型（multi-column content model）：可以在容器盒與內容之間創建列盒（column boxes）。

實驗性的柵格，彈性盒內容模型也創建新的盒類型。

定位方案（Position schemes）

CSS引擎在盒生成之后，會采用以下方案指定他們的位置。

常規流（normal flow）：對塊級盒進行塊級格式化，對行內級盒進行行級格式化，對塊級盒和行內級盒進行相對定位。
浮動（float）：先根據常規流來定位，然后從常規流中脫離出來，并盡可能向左或向右偏移，向左偏移，直到它的外邊界接觸到它的包含塊的邊界或者另一個浮動元素的外邊界。
絕對定位（absolute或fixed position）：盒從常規流中完全脫離出來，并相對其包含塊來指定其位置。

display，position和float的相互關系：

相互關系：

如果'display'值為'none'，那么'position'和'float'無效，元素不生成框。
否則，如果'position'值為'absolute'或者'fixed'，框絕對地定位'float'計算的值為'none'，并且 display根據下面的表格進行設定。框的位置由'top', 'right', 'bottom'和'left'屬性和包含塊決定。
否則，如果'float'的值不是'none'，該框是浮動的，且'display'值根據下面的表格進行設定。
否則，如果元素是根元素，'display'值根據下面的表格進行設定，除了其在CSS2.1里面沒有定義是否指定值'list-item'對應計算值'block'或者'list-item'。
否則，'display' 的計算值為指定的值。

轉換對應表：

常規流（Normal flow）

常規流中，在塊級上下文里面，他們豎著排列；在行級上下文中，他們橫著排列。

觸發條件：position為static，relative且float為none。

position為static時，盒的位置是常規流里布局的位置。
postion為relative時，盒偏移位置由top，bottom，left和right指定，即時有偏移，仍然保留原有的位置，其他常規流不能占用這個位置。

塊級格式化上下文（Blockformatting contexts）

浮動盒，絕對定位盒，非塊盒的塊容器盒，overflow非visible的塊盒均會建立塊級格式化上下文。

塊級格式化上下文中，塊盒會從包含塊的頂部開始，一個接一個在垂直方向擺放。兩個兄弟塊容器盒之間垂直方向上的外邊距會發生重疊。

在塊級格式化上下文中，每個盒的左外邊距均緊貼其包含塊的左邊。即時在浮動的情況下，除非盒創建了一個新的格式化上下文（在這種情況下該盒可能會為了避開浮動盒而變窄）。

行級格式化上下文Inline formatting contexts

在行級格式化上下文中，盒會從包含塊的頂部開始，一個接一個的水平擺放。擺放這些框的時候，它們在水平方向上的外邊距、邊框、內邊距所占用的空間都會被考慮在內。在垂直方向上，這些盒可能會以不同形式來對齊：它們可能會把底部或頂部對齊，也可能把其內部的文本基線對齊。能把在一行上的盒都完全包含進去的一個矩形區域，被稱為該行的行盒。

行盒一定會擴展到足以容納它所包含的全部行內盒。一般行內盒的左邊緊貼其包含塊的左邊，右邊緊貼其包含塊的右邊。浮動盒可以插在包含塊邊緣與行內盒邊緣之間。

當一行上的行內盒的總寬度小于包含它們的行盒的寬度，則它們在行級盒內的水平分布由'text-align'屬性來決定。如果該屬性取值為'justify'，則用戶代理可拉伸行內盒(但不能是inline-table和inline-block框)中的空格和字間距。

當一個行內盒的總寬度超過了行盒的寬度，則行盒會被分割成幾個行盒。如果此行內盒不可分割（例如：單個字符、或語言指定的文字打斷規則不允許在此行內盒中出現打斷、或該行內盒受white-space屬性為nowrap或pre的影響），則該行內盒溢出該行盒。

相對定位

相對定位指盒相對其在常規流或浮動的位置的偏移。當一個盒設置了相對定位（position為relative），仍然保留盒在文檔流或浮動盒中的原始位置，其后緊接的元素依然根據元素的原始位置排列。這意味著相對定位會導致盒重疊。

然而，如果相對定位導致 'overflow:auto' 或 'overflow:scroll' 的框溢出，則用戶代理必須允許通過創建滾動條來使用戶訪問到這些內容(在它的偏移后位置上)，這可能會影響布局。

相對定位框保持它在常規流中的尺寸，包括最初為其保留的換行和空白。包含塊定義中說明了相對定位盒會在何時創建一個新的包含塊。

對于相對定位元素，'left'和'right'屬性會在不改變其框尺寸的情況下水平地移動框。盒不會由于'left'或'right'屬性而被分割或被拉伸，因此使用的值總是left=-right。

如果'left'和'right'值都是'auto'(它們的初始值)，則其使用值就是'0'(也就是框在它們的初始位置)。

如果'left'值是'auto'，則其使用值是'right'屬性值的負數(也就是框通過'right'值向左移動)。

如果'right'的指定值為'auto'，則其使用值是'left'屬性值的負數。

如果'left'或'right'的取值都不是'auto'，則對其位置的約束過多，因此要忽略其中的一個值。如果包含塊的'direction'為'ltr'，則'left'勝出，而'right'值變為-'left'(left的負值)。如果包含塊的'direction'為'rtl'，則'right'勝出，而'left'值被忽略。

下面的三個規則是等價的:

div.a8 { position: relative; direction: ltr; left: -1em; right: auto }
div.a8 { position: relative; direction: ltr; left: auto; right: 1em }
div.a8 { position: relative; direction: ltr; left: -1em; right: 5em }

'top'和'bottom'屬性會在不改變其框尺寸的情況下上下移動相對定位元素。'Top'把框向上移動，'bottom'把框向下移動。因為框不會由于'top'或'bottom'值而被分割或被拉伸，其使用值總是:top=-bottom。如果它們都是'auto'，則它們的使用值都為'0'。如果它們中的一個是'auto'，則它成為另一個的負值。如果兩者都不是'auto'，則'bottom'被忽略(也就是，bottom的使用值為'top'的負值)。