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

（1）盒尺寸：明確指定，受限或沒有指定
（2）盒類型：行內(nèi)(inline), 行內(nèi)級別(inline-level), 原子行內(nèi)級別(atomic inline-level), 塊(block)盒；
（3）定位方案(positioning scheme): 常規(guī)流，浮動或絕對定位；
（4）樹中的其它元素: 它的子代與同代；
（5）視口(viewport) 尺寸與位置；
（6）內(nèi)含圖片的固定尺寸；
（7）其它信息。
一個盒相對于它的包含塊(containing block) 的邊界來渲染。通常盒為它的后代元素建立包含塊。注意盒并不受它的包含塊的限制，當(dāng)它的布局跑到包含塊的外面時稱為溢出(overflow)。

視口 Viewport
在連續(xù)媒介上工作的用戶代理通常會向用戶提供一個視口（屏幕上的一個窗口或其它可視區(qū)域），用戶可以通過它來訪問文檔。用戶代理可以在視口被調(diào)整大小時改變文檔的布局（詳見初始包含塊）。

如果視口小于渲染文檔的畫布區(qū)域，用戶代理應(yīng)當(dāng)提供一個滾動機(jī)制。每個畫布最多可擁有一個視口，但用戶代理可以把文檔渲染至多個畫布上（即為相同文檔提供不同的視圖）。

包含塊 Containing blocks
在CSS 2.1中，許多框的位置和大小都根據(jù)一個名為包含塊的矩形框邊緣來相對計算得到。為元素生成的框通常會充當(dāng)其后裔框的包含塊；我們稱框?yàn)槠浜笠?ldquo;創(chuàng)建”（establishes）了包含塊。“框的包含塊”表示“框所處的包含塊”，而不是其產(chǎn)生的包含塊。

每個框會被給予一個相對于其包含塊的位置，但它不會被局限在其包含塊內(nèi)；它有可能會溢出。

盒的生成(Box generation)
CSS 視覺格式化模型的一部分工作是從文檔元素生成盒。生成的盒擁有不同類型，并對視覺格式化模型的處理產(chǎn)生影響。生成盒的類型取決于 CSS 屬性 display

塊級元素與塊盒(Block-level elements and block boxes)

當(dāng)元素的 CSS 屬性  display 為 block, list-item 或 table 時，它是塊級元素 block-level 。塊級元素（比如<p>)視覺上呈現(xiàn)為塊，豎直排列。

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

主要塊級盒將包含后代元素生成的盒以及生成的內(nèi)容。它也是可以使用(定位方案 positioning scheme)的盒。

venn_blocks.png一個塊級盒可能也是一個塊容器盒。塊容器盒(block container box) 只包含其它塊級盒，或生成一個行內(nèi)格式化上下文(inline formatting context)，由此只包含行內(nèi)盒。注意塊級盒與塊容器盒概念不同。 前者描述元素跟它的父元素與兄弟元素之間的表現(xiàn)，后者描述元素跟它的后代之間的影響。有些塊級盒，比如表格，不是塊容器盒。相反，一些塊容器盒，比如非替換行內(nèi)塊及非替換表格單元格，不是塊級盒。

同時是塊容器盒的塊級盒稱為塊盒(block boxes)。

匿名塊盒(Anonymous block boxes)

有時需要添加補(bǔ)充性盒，這些盒稱為匿名盒(anonymous boxes),  它們沒有名字，不能被 CSS 選擇符選中。

不能被 CSS 選擇符選中意味著不能用樣式表添加樣式。這意味著所有繼承的 CSS 屬性值為 inherit ，所有非繼承的 CSS 屬性值為 initial 。

塊容器盒要么只包含行內(nèi)級盒，要么只包含塊級盒。但通常文檔會同時包含兩者。在這種情況下，將創(chuàng)建匿名塊盒來包含毗鄰的行內(nèi)級盒。

拿下面的 HTML 代碼來說 ( <div> 與 <p> 使用默認(rèn)屬性 display:block )

發(fā)表評論 共有條評論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表