如何使用CSS代碼編寫視覺格式化模型，相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
天心網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,天心網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為天心近千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的天心做網(wǎng)站的公司定做！
CSS 視覺格式化模型(visual formatting model)是用來(lái)處理文檔并將它顯示在視覺媒體上的機(jī)制。這是 CSS 的一個(gè)基礎(chǔ)概念。 視覺格式化模型根據(jù) CSS 盒模型為文檔的每個(gè)元素生成 0，1 或多個(gè)盒。每個(gè)盒的布局由如下內(nèi)容組成：
（1）盒尺寸：明確指定，受限或沒有指定
（2）盒類型：行內(nèi)(inline), 行內(nèi)級(jí)別(inline-level), 原子行內(nèi)級(jí)別(atomic inline-level), 塊(block)盒；
（3）定位方案(positioning scheme): 常規(guī)流，浮動(dòng)或絕對(duì)定位；
（4）樹中的其它元素: 它的子代與同代；
（5）視口(viewport) 尺寸與位置；
（6）內(nèi)含圖片的固定尺寸；
（7）其它信息。
一個(gè)盒相對(duì)于它的包含塊(containing block) 的邊界來(lái)渲染。通常盒為它的后代元素建立包含塊。注意盒并不受它的包含塊的限制，當(dāng)它的布局跑到包含塊的外面時(shí)稱為溢出(overflow)。
視口 Viewport
在連續(xù)媒介上工作的用戶代理通常會(huì)向用戶提供一個(gè)視口（屏幕上的一個(gè)窗口或其它可視區(qū)域），用戶可以通過(guò)它來(lái)訪問(wèn)文檔。用戶代理可以在視口被調(diào)整大小時(shí)改變文檔的布局（詳見初始包含塊）。
如果視口小于渲染文檔的畫布區(qū)域，用戶代理應(yīng)當(dāng)提供一個(gè)滾動(dòng)機(jī)制。每個(gè)畫布最多可擁有一個(gè)視口，但用戶代理可以把文檔渲染至多個(gè)畫布上（即為相同文檔提供不同的視圖）。
包含塊 Containing blocks
在CSS 2.1中，許多框的位置和大小都根據(jù)一個(gè)名為包含塊的矩形框邊緣來(lái)相對(duì)計(jì)算得到。為元素生成的框通常會(huì)充當(dāng)其后裔框的包含塊；我們稱框?yàn)槠浜笠帷皠?chuàng)建”（establishes）了包含塊?！翱虻陌瑝K”表示“框所處的包含塊”，而不是其產(chǎn)生的包含塊。
每個(gè)框會(huì)被給予一個(gè)相對(duì)于其包含塊的位置，但它不會(huì)被局限在其包含塊內(nèi)；它有可能會(huì)溢出。
盒的生成(Box generation)
CSS 視覺格式化模型的一部分工作是從文檔元素生成盒。生成的盒擁有不同類型，并對(duì)視覺格式化模型的處理產(chǎn)生影響。生成盒的類型取決于 CSS 屬性 display
塊級(jí)元素與塊盒(Block-level elements and block boxes)
當(dāng)元素的 CSS 屬性 display 為 block, list-item 或 table 時(shí)，它是塊級(jí)元素 block-level 。塊級(jí)元素（比如
)視覺上呈現(xiàn)為塊，豎直排列。
塊級(jí)盒參與(塊格式化上下文 block formatting context)。每個(gè)塊級(jí)元素至少生成一個(gè)塊級(jí)盒，稱為主要塊級(jí)盒(principal block-level box)。一些元素，比如
主要塊級(jí)盒將包含后代元素生成的盒以及生成的內(nèi)容。它也是可以使用(定位方案 positioning scheme)的盒。
venn_blocks.png一個(gè)塊級(jí)盒可能也是一個(gè)塊容器盒。塊容器盒(block container box) 只包含其它塊級(jí)盒，或生成一個(gè)行內(nèi)格式化上下文(inline formatting context)，由此只包含行內(nèi)盒。注意塊級(jí)盒與塊容器盒概念不同。 前者描述元素跟它的父元素與兄弟元素之間的表現(xiàn)，后者描述元素跟它的后代之間的影響。有些塊級(jí)盒，比如表格，不是塊容器盒。相反，一些塊容器盒，比如非替換行內(nèi)塊及非替換表格單元格，不是塊級(jí)盒。
同時(shí)是塊容器盒的塊級(jí)盒稱為塊盒(block boxes)。
匿名塊盒(Anonymous block boxes)
有時(shí)需要添加補(bǔ)充性盒，這些盒稱為匿名盒(anonymous boxes), 它們沒有名字，不能被 CSS 選擇符選中。
不能被 CSS 選擇符選中意味著不能用樣式表添加樣式。這意味著所有繼承的 CSS 屬性值為 inherit ，所有非繼承的 CSS 屬性值為 initial 。
塊容器盒要么只包含行內(nèi)級(jí)盒，要么只包含塊級(jí)盒。但通常文檔會(huì)同時(shí)包含兩者。在這種情況下，將創(chuàng)建匿名塊盒來(lái)包含毗鄰的行內(nèi)級(jí)盒。
拿下面的 HTML 代碼來(lái)說(shuō) (
使用默認(rèn)屬性 display:block )
XML/HTML Code復(fù)制內(nèi)容到剪貼板
followed by a paragraph
followed by more inline text.將創(chuàng)建兩個(gè)匿名塊盒，一個(gè)包含
前面的文本 (Some inline text)， 一個(gè)包含
后面的文本(followed by more inline text), 結(jié)構(gòu)如下:
結(jié)果:
代碼如下:
Some inline text
followed by a paragraph
followed by more inline text.
和
元素不同, 開發(fā)者不能控制這兩個(gè)匿名盒。對(duì)于可繼承屬性， 它們將取
可以指定 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)級(jí)元素與行內(nèi)盒(Inline-level elements and inline boxes)
當(dāng)元素的 CSS 屬性 display 的計(jì)算值為 inline, inline-block 或 inline-table 時(shí)，稱它為行內(nèi)級(jí)元素。視覺上它將內(nèi)容與其它行內(nèi)級(jí)元素排列為多行。典型的如段落內(nèi)容，有文本(可以有多種格式譬如著重)，或圖片，都是行內(nèi)級(jí)元素。
行內(nèi)級(jí)元素生成行內(nèi)級(jí)盒(inline-level boxes)，參與行內(nèi)格式化上下文(inline formatting context)。同時(shí)參與生成行內(nèi)格式化上下文的行內(nèi)級(jí)盒稱為行內(nèi)盒(Inline boxes)。所有display:inline 的非替換元素生成的盒是行內(nèi)盒。而不參與生成行內(nèi)格式化上下文的行內(nèi)級(jí)盒稱為原子行內(nèi)級(jí)盒(atomic inline-level boxes)。這些盒由可替換行內(nèi)元素，或 display 值為 inline-block 或 inline-table 的元素生成，不能拆分成多個(gè)盒。
注意：起初原子行內(nèi)級(jí)盒(atomic inline-level boxes)被稱為原子行內(nèi)盒(atomic inline boxes)。很不幸，它們并非行內(nèi)盒。規(guī)范的勘誤表修正了這個(gè)錯(cuò)誤。 不管怎樣，當(dāng)再看到原子行內(nèi)盒時(shí)可以放心的當(dāng)成原子行內(nèi)級(jí)盒，因?yàn)橹皇歉牧嗣帧?br/>原子行內(nèi)盒在行內(nèi)格式化上下文里不能分成多行。
CSS Code復(fù)制內(nèi)容到剪貼板
span 里的文本 可以
分成多行因?yàn)?/span>它是個(gè)行內(nèi)盒。
結(jié)果:
代碼如下:
span 里的文本可以
分成多行因?yàn)樗莻€(gè)
行內(nèi)盒。
CSS Code復(fù)制內(nèi)容到剪貼板
span 里的文本 不能分成多行
因?yàn)樗?/span> 是個(gè)行內(nèi)塊盒。
結(jié)果:
代碼如下:
span 里的文本
不能分成多行因?yàn)樗?br/>是個(gè)行內(nèi)塊盒。
匿名行內(nèi)盒(Anonymous inline boxes)
類似于塊盒，CSS 引擎有時(shí)自動(dòng)生成行內(nèi)盒。這些盒也是匿名的，因?yàn)樗鼈儧]有對(duì)應(yīng)的選擇器名字。它們繼承所有可繼承的屬性，非繼承的屬性取 initial。
匿名行內(nèi)盒最常見的例子是塊盒直接包含文本，文本將包含在匿名行內(nèi)盒中?？瞻兹绻褂脀hite-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ù)盒的類型決定是塊盒還是行盒?？梢杂脕?lái)在第一個(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ī)流里提出來(lái)，放在當(dāng)前盒的旁邊。
（3）絕對(duì)定位(absolute positioning)中的盒坐標(biāo)是絕對(duì)的。絕對(duì)定位元素可以蓋住使用其它定位方案的元素。
常規(guī)流(Normal flow)
在常規(guī)流中，盒一個(gè)接著一個(gè)排列。在塊級(jí)格式化上下文里面， 它們豎著排列；在行內(nèi)格式化上下文里面， 它們橫著排列。 當(dāng) position 為 static 或 relative，并且 float 為 none 時(shí)會(huì)觸發(fā)常規(guī)流。
（1）在塊級(jí)格式化上下文里面，常規(guī)流豎著排列。
（2）行內(nèi)格式化上下文里面，常規(guī)流橫著排列。
常規(guī)流分為兩種情況：
（1）對(duì)于靜態(tài)定位(static positioning),position 值 為 static ,盒的位置是常規(guī)流布局里的位置。
（2）對(duì)于相對(duì)定位(relative positioning),position 值 為 relative, 盒偏移位置由這些屬性定義 top, bottom, left and right 。即使有偏移，仍然保留原有的位置，其它常規(guī)流不能占用這個(gè)位置。
浮動(dòng)(Floats)
對(duì)于浮動(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)定位在行盒的末尾。
絕對(duì)定位(Absolute positioning)
對(duì)于絕對(duì)定位方案， 盒從常規(guī)流中被移除，不影響常規(guī)流的布局。 它的定位相對(duì)于它的包含塊，相關(guān)CSS屬性： top, bottom, left 及 right 。
如果元素的屬性position為 absolute 或 fixed， 它是絕對(duì)定位元素。
固定定位元素(fixed positioned element)也是絕對(duì)定位元素，它的包含塊是視口。當(dāng)頁(yè)面滾動(dòng)時(shí)它固定在屏幕上，因?yàn)橐暱跊]有移動(dòng)。
看完上述內(nèi)容，你們掌握如何使用CSS代碼編寫視覺格式化模型的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
重慶分公司
重慶分公司
