如何使用CSS代碼編寫視覺格式化模型

如何使用CSS代碼編寫視覺格式化模型，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

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

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

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

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

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

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

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

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

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

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

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

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

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

匿名塊盒(Anonymous block boxes)

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

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

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

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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

將創(chuàng)建兩個(gè)匿名塊盒，一個(gè)包含 <p> 前面的文本 (Some inline text)， 一個(gè)包含 <p> 后面的文本(followed by more inline text),  結(jié)構(gòu)如下:

結(jié)果:

代碼如下:

Some inline text
followed by a paragraph
followed by more inline text.

和 <p> 元素不同, 開發(fā)者不能控制這兩個(gè)匿名盒。對于可繼承屬性， 它們將取 <div> 的屬性值, 比如 color。對于非繼承屬性，值為初始值 ，比如沒有指定 background-color, 值為初始值即 transparent，于是 <div> 背景可見。而 <p> 可以指定 background-color 。類似的，這兩個(gè)匿名盒文本是一樣的顏色。
另一種將創(chuàng)建匿名塊盒的情況是，一個(gè)行內(nèi)盒包含了一個(gè)或幾個(gè)塊盒。在這種情況下，包含塊盒的盒將拆分為兩個(gè)行內(nèi)盒放置于塊盒前后，然后分別由兩個(gè)匿名塊盒包含。這樣塊盒就與兩個(gè)包含行內(nèi)元素的匿名塊盒形成了兄弟關(guān)系。

如果行內(nèi)盒包含多個(gè)塊盒，并且這些塊盒之間沒有夾雜內(nèi)容，將在這些塊盒前后創(chuàng)建匿名塊盒。

行內(nèi)級元素與行內(nèi)盒(Inline-level elements and inline boxes)

當(dāng)元素的 CSS 屬性 display 的計(jì)算值為 inline, inline-block 或 inline-table 時(shí)，稱它為行內(nèi)級元素。視覺上它將內(nèi)容與其它行內(nèi)級元素排列為多行。典型的如段落內(nèi)容，有文本(可以有多種格式譬如著重)，或圖片，都是行內(nèi)級元素。
行內(nèi)級元素生成行內(nèi)級盒(inline-level boxes)，參與行內(nèi)格式化上下文(inline formatting context)。同時(shí)參與生成行內(nèi)格式化上下文的行內(nèi)級盒稱為行內(nèi)盒(Inline boxes)。所有display:inline 的非替換元素生成的盒是行內(nèi)盒。而不參與生成行內(nèi)格式化上下文的行內(nèi)級盒稱為原子行內(nèi)級盒(atomic inline-level boxes)。這些盒由可替換行內(nèi)元素，或 display 值為 inline-block 或 inline-table 的元素生成，不能拆分成多個(gè)盒。

注意：起初原子行內(nèi)級盒(atomic inline-level boxes)被稱為原子行內(nèi)盒(atomic inline boxes)。很不幸，它們并非行內(nèi)盒。規(guī)范的勘誤表修正了這個(gè)錯(cuò)誤。 不管怎樣，當(dāng)再看到原子行內(nèi)盒時(shí)可以放心的當(dāng)成原子行內(nèi)級盒，因?yàn)橹皇歉牧嗣帧?br/>原子行內(nèi)盒在行內(nèi)格式化上下文里不能分成多行。

CSS Code復(fù)制內(nèi)容到剪貼板

1. <style>   

2.   span {   

3.     display:inline; /* default value*/  

4.   }   

5. </style>   

6. <div style="width:20em;">   

7.    span 里的文本 <span>可以   

8.    分成多行因?yàn)?lt;/span>它是個(gè)行內(nèi)盒。   

9. </div>  

結(jié)果:

代碼如下:

span 里的文本可以
分成多行因?yàn)樗莻€(gè)
行內(nèi)盒。

CSS Code復(fù)制內(nèi)容到剪貼板

1. <style>   

2.   span {   

3.     display:inline-block;   

4.   }   

5. </style>   

6. <div style="width:20em;">   

7.    span 里的文本 <span>不能分成多行   

8.    因?yàn)樗?lt;/span> 是個(gè)行內(nèi)塊盒。   

9. </div>  

結(jié)果:

代碼如下:

span 里的文本
不能分成多行因?yàn)樗?br/>是個(gè)行內(nèi)塊盒。
匿名行內(nèi)盒(Anonymous inline boxes)

類似于塊盒，CSS 引擎有時(shí)自動(dòng)生成行內(nèi)盒。這些盒也是匿名的，因?yàn)樗鼈儧]有對應(yīng)的選擇器名字。它們繼承所有可繼承的屬性，非繼承的屬性取 initial。

匿名行內(nèi)盒最常見的例子是塊盒直接包含文本，文本將包含在匿名行內(nèi)盒中。空白如果使用white-space 去掉，則不會(huì)生成匿名行內(nèi)盒。

行盒(Line boxes)

行盒由行內(nèi)格式化上下文(inline formatting context)產(chǎn)生的盒，用于表示一行。在塊盒里面，行盒從塊盒一邊排版到另一邊。 當(dāng)有浮動(dòng)時(shí), 行盒從左浮動(dòng)的最右邊排版到右浮動(dòng)的最左邊。

行盒是技術(shù)上的實(shí)現(xiàn)，開發(fā)者通常不用操心它。

插入盒(Run-in boxes)

插入盒，由  display:run-in 定義，由后續(xù)盒的類型決定是塊盒還是行盒。可以用來在第一個(gè)段落中插入標(biāo)題。

Note: 插入盒(Run-in boxes)從 CSS 2.1 標(biāo)準(zhǔn)中移除了，因?yàn)榭刹僮鞯膶?shí)現(xiàn)定義不足。 可能 CSS3 會(huì)引入，但是這是實(shí)驗(yàn)性質(zhì)，不能用于生產(chǎn)環(huán)境。

除了行內(nèi)及塊格式化上下文， CSS 允許元素有更多的內(nèi)容模型。這些增加的模型是為了描述特定的布局，可能會(huì)定義新的盒類型:

（1）表格內(nèi)容模型(table content model)可以創(chuàng)建一個(gè)表格包裝盒(table wrapper box)及表格盒(table box), 也可以創(chuàng)建特殊盒，比如標(biāo)題盒(caption boxes)。
（2）多列內(nèi)容模型(multi-column content model)可以在容器盒與內(nèi)容之間創(chuàng)建列盒(column boxes)。
（3）實(shí)驗(yàn)性的柵格，彈性盒內(nèi)容模型也創(chuàng)建新的盒類型。
（4）定位方案(Positioning schemes)EDIT

一旦盒生成了， CSS 引擎要指定它們的位置。會(huì)用到下列之一的方案：

（1）常規(guī)流(normal flow)盒一個(gè)接一個(gè)排列。
（2）浮動(dòng)(floats)方案將盒從常規(guī)流里提出來，放在當(dāng)前盒的旁邊。
（3）絕對定位(absolute positioning)中的盒坐標(biāo)是絕對的。絕對定位元素可以蓋住使用其它定位方案的元素。

常規(guī)流(Normal flow)

在常規(guī)流中，盒一個(gè)接著一個(gè)排列。在塊級格式化上下文里面， 它們豎著排列；在行內(nèi)格式化上下文里面， 它們橫著排列。 當(dāng) position 為 static 或 relative，并且 float 為 none 時(shí)會(huì)觸發(fā)常規(guī)流。

（1）在塊級格式化上下文里面，常規(guī)流豎著排列。
（2）行內(nèi)格式化上下文里面，常規(guī)流橫著排列。

常規(guī)流分為兩種情況：
（1）對于靜態(tài)定位(static positioning),position 值 為 static ,盒的位置是常規(guī)流布局里的位置。
（2）對于相對定位(relative positioning),position 值 為 relative, 盒偏移位置由這些屬性定義 top, bottom, left and right 。即使有偏移，仍然保留原有的位置，其它常規(guī)流不能占用這個(gè)位置。

浮動(dòng)(Floats)
對于浮動(dòng)定位方案(float positioning scheme), 盒稱為浮動(dòng)盒(floating boxes)。它位于當(dāng)前行的開頭或末尾。這導(dǎo)致常規(guī)流環(huán)繞在它的周邊，除非設(shè)置 clear 屬性。

要使用浮動(dòng)定位方案，元素 CSS 屬性 position 為 static 或 relative，然后  float 不為 none 。如果 float 設(shè)為 left, 浮動(dòng)由行盒的開頭開始定位。如果設(shè)為 right, 浮動(dòng)定位在行盒的末尾。

絕對定位(Absolute positioning)

對于絕對定位方案， 盒從常規(guī)流中被移除，不影響常規(guī)流的布局。 它的定位相對于它的包含塊，相關(guān)CSS屬性： top, bottom, left 及 right 。

如果元素的屬性position為 absolute 或 fixed， 它是絕對定位元素。

固定定位元素(fixed positioned element)也是絕對定位元素，它的包含塊是視口。當(dāng)頁面滾動(dòng)時(shí)它固定在屏幕上，因?yàn)橐暱跊]有移動(dòng)。

看完上述內(nèi)容，你們掌握如何使用CSS代碼編寫視覺格式化模型的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！