今日勵(lì)志

不論你在什么時(shí)候開始，重要的是開始之后不要停止。

前言

對(duì)于部分前端工程師來講，有時(shí)候CSS令他們很頭疼，明明設(shè)置了某個(gè)樣式，但是布局就是不起作用。

如果你也有這種問題，那么是時(shí)候?qū)W習(xí)下什么是css視覺格式化模型了。知己知彼方能解決問題。

CSS 視覺格式化模型（visual formatting model）是用來處理和在視覺媒體上顯示文檔時(shí)使用的計(jì)算規(guī)則。該模型是 CSS 的基礎(chǔ)概念之一。

視覺格式化模型會(huì)根據(jù)CSS盒子模型將文檔中的元素轉(zhuǎn)換為一個(gè)個(gè)盒子，每個(gè)盒子的布局由以下因素決定：

盒子的尺寸：精確指定、由約束條件指定或沒有指定

盒子的類型：行內(nèi)盒子（inline）、行內(nèi)級(jí)盒子（inline-level）、原子行內(nèi)級(jí)盒子（atomic
inline-level）、塊盒子（block）

定位方案（positioning scheme）：普通流定位、浮動(dòng)定位或絕對(duì)定位

文檔樹中的其它元素：即當(dāng)前盒子的子元素或兄弟元素

視口尺寸與位置

所包含的圖片的尺寸

其他的某些外部因素

該模型會(huì)根據(jù)盒子的包含塊（containing block）的邊界來渲染盒子。通常，盒子會(huì)創(chuàng)建一個(gè)包含其后代元素的包含塊，但是盒子并不由包含塊所限制，當(dāng)盒子的布局跑到包含塊的外面時(shí)稱為溢出（overflow）

盒子生成介紹

盒子的生成是 CSS 視覺格式化模型的一部分，用于從文檔元素生成盒子。盒子有不同的類型，不同類型的盒子的格式化方法也有所不同。盒子的類型取決于 CSS 的display屬性。

塊級(jí)元素與塊盒子

當(dāng)元素的 display為 block、list-item或 table時(shí)，該元素將成為塊級(jí)元素。一個(gè)塊級(jí)元素會(huì)被格式化成一個(gè)塊（例如文章的一個(gè)段落），默認(rèn)按照垂直方向依次排列。

每個(gè)塊級(jí)盒子都會(huì)參與塊格式化上下文（block formatting context）的創(chuàng)建，而每個(gè)塊級(jí)元素都會(huì)至少生成一個(gè)塊級(jí)盒子，即主塊級(jí)盒子（principal block-level box）。有一些元素，比如列表項(xiàng)會(huì)生成額外的盒子來放置項(xiàng)目符號(hào)，而那些會(huì)生成列表項(xiàng)的元素可能會(huì)生成更多的盒子。不過，多數(shù)元素只生成一個(gè)主塊級(jí)盒子。

主塊級(jí)盒子包含由后代元素生成的盒子以及內(nèi)容，同時(shí)它也會(huì)參與定位方案。

一個(gè)塊級(jí)盒子可能也是一個(gè)塊容器盒子。塊容器盒子（block container box）要么只包含其它塊級(jí)盒子，要么只包含行內(nèi)盒子并同時(shí)創(chuàng)建一個(gè)行內(nèi)格式化上下文（inline formatting context）。

能夠注意到塊級(jí)盒子與塊容器盒子是不同的這一點(diǎn)很重要。前者描述了元素與其父元素和兄弟元素之間的行為，而后者描述了元素跟其后代之間的行為。有些塊級(jí)盒子并不是塊容器盒子，比如表格；而有些塊容器盒子也不是塊級(jí)盒子，比如非替換行內(nèi)塊和非替換表格單元格。

一個(gè)同時(shí)是塊容器盒子的塊級(jí)盒子稱為塊盒子（block box）。

匿名塊盒子
在某些情況下進(jìn)行視覺格式化時(shí)，需要添加一些增補(bǔ)性的盒子，這些盒子不能用CSS選擇符選中，因此稱為匿名盒子（anonymous boxes）。

CSS選擇器不能作用于匿名盒子(anonymous boxes)，所以它不能被樣式表賦予樣式。也就是說，此時(shí)所有可繼承的 CSS 屬性值都為 inherit ，而所有不可繼承的 CSS 屬性值都為 initial。

塊包含盒子可能只包含行內(nèi)級(jí)盒子，也可能只包含塊級(jí)盒子，但通常的文檔都會(huì)同時(shí)包含兩者，在這種情況下，就會(huì)在相鄰的行內(nèi)級(jí)盒子外創(chuàng)建匿名塊盒子。

示例節(jié)
考慮下面的HTML代碼，假設(shè) 和 都保持默認(rèn)的樣式（即它們的 display 為 block）：

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

此時(shí)會(huì)產(chǎn)生兩個(gè)匿名塊盒子：一個(gè)是 元素前面的那些文本（Some inline text），另一個(gè)是元素后面的文本（followed by more inline text.）。此時(shí)會(huì)生成下面的塊結(jié)構(gòu)：

顯示為：

Some inline textfollowed by a paragraphfollowed by more inline text.

對(duì)這兩個(gè)匿名盒子來說，程序員無法像<p>元素那樣控制它們的樣式，因此它們會(huì)從<div>那里繼承那些可繼承的屬性，如 color。其他不可繼承的屬性則會(huì)設(shè)置為 initial，比如，因?yàn)闆]有為它們指定 background-color，因此其具有默認(rèn)的透明背景，而 元素的盒子則能夠用CSS指定背景顏色。類似地，兩個(gè)匿名盒子的文本顏色總是一樣的。

另一種會(huì)創(chuàng)建匿名塊盒子的情況是一個(gè)行內(nèi)盒子中包含一或多個(gè)塊盒子。此時(shí)，包含塊盒子的盒子會(huì)拆分為兩個(gè)行內(nèi)盒子，分別位于塊盒子的前面和后面。塊盒子前面的所有行內(nèi)盒子會(huì)被一個(gè)匿名塊盒子包裹，塊盒子后面的行內(nèi)盒子也是一樣。因此，塊盒子將成為這兩個(gè)匿名塊盒子的兄弟盒子。

如果有多個(gè)塊盒子，而它們中間又沒有行內(nèi)元素，則會(huì)在這些盒子的前面和后面創(chuàng)建兩個(gè)匿名塊盒子。

行內(nèi)級(jí)元素和行內(nèi)盒子節(jié)
如果一個(gè)元素的display屬性為inline、inline-block或inline-table，則稱該元素為行內(nèi)級(jí)元素。顯示時(shí)，它不會(huì)生成內(nèi)容塊，但是可以與其他行內(nèi)級(jí)內(nèi)容一起顯示為多行。一個(gè)典型的例子是包含多種格式內(nèi)容（如強(qiáng)調(diào)文本、圖片等）的段落，就可以由行內(nèi)級(jí)元素組成。

行內(nèi)級(jí)元素會(huì)生成行內(nèi)級(jí)盒子，該盒子同時(shí)會(huì)參與行內(nèi)格式化上下文（inline formatting context）的創(chuàng)建。行內(nèi)盒子既是行內(nèi)級(jí)盒子，也是一個(gè)其內(nèi)容會(huì)參與創(chuàng)建其容器的行內(nèi)格式化上下文的盒子，比如所有具有display:inline樣式的非替換盒子。如果一個(gè)行內(nèi)級(jí)盒子的內(nèi)容不參與行內(nèi)格式化上下文的創(chuàng)建，則稱其為原子行內(nèi)級(jí)盒子。而通過替換行內(nèi)級(jí)元素或display值為inline-block或inline-table的元素創(chuàng)建的盒子不會(huì)像行內(nèi)盒子一樣可以被拆分為多個(gè)盒子。

注意：開始的時(shí)候，原子行內(nèi)級(jí)盒子叫做原子行內(nèi)盒子，這并不準(zhǔn)確，因?yàn)樗鼈儾⒉皇切袃?nèi)盒子。后來在一次勘誤時(shí)修正了這一問題。不過，當(dāng)你見到某些文章中使用了“原子行內(nèi)盒子”的時(shí)候，你盡可以將其理解為“原子行內(nèi)級(jí)盒子”，因?yàn)檫@僅僅是一個(gè)名字的修改。

在同一個(gè)行內(nèi)格式化上下文中，原子行內(nèi)級(jí)盒子不能拆分成多行：

<style> span {display: inline; /* default value*/ }</style> <div style="width:20em;">The text in the span<span>can be split in several lines as it</span>is an inline box. </div>

可能會(huì)顯示為：

The text in the span can be split into several lines as it is an inline box.

而：

<style> span {display: inline-block; }</style> <div style="width:20em;">The text in the span<span>cannot be split in several lines as it</span>is an inline-block box. </div>

則可能顯示為：

The text in the span cannot be split into several lines as it is an inline-block box.

其中的“cannot be split into several lines as it”永遠(yuǎn)不會(huì)換行。

匿名行內(nèi)盒子

類似于塊盒子，CSS引擎有時(shí)候也會(huì)自動(dòng)創(chuàng)建一些行內(nèi)盒子。這些行內(nèi)盒子無法被選擇符選中，因此是匿名的，它們從父元素那里繼承那些可繼承的屬性，其他屬性保持默認(rèn)值initial。

一種常見的情況是CSS引擎會(huì)自動(dòng)為直接包含在塊盒子中的文本創(chuàng)建一個(gè)行內(nèi)格式化上下文，在這種情況下，這些文本會(huì)被一個(gè)足夠大的匿名行內(nèi)盒子所包含。但是如果僅包含空格則有可能不會(huì)生成匿名行內(nèi)盒子，因?yàn)榭崭裼锌赡軙?huì)由于white-space的設(shè)置而被移除，從而導(dǎo)致最終的實(shí)際內(nèi)容為空。

其他類型的盒子

行盒子

行盒子由行內(nèi)格式化上下文創(chuàng)建，用來顯示一行文本。在塊盒子內(nèi)部，行盒子總是從塊盒子的一邊延伸到另一邊（譯注：即占據(jù)整個(gè)塊盒子的寬度）。當(dāng)有浮動(dòng)元素時(shí)，行盒子會(huì)從向左浮動(dòng)的元素的右邊緣延伸到向右浮動(dòng)的元素的左邊緣。

行盒子更多是以技術(shù)性目的而存在的，Web開發(fā)者通常不需要關(guān)心。

Run-in 盒子

Run-in 盒子通過display:run-in來定義，它可以是塊盒子，也可以是行內(nèi)盒子，這取決于緊隨其后的盒子的類型。Run-in 盒子可以用來在可能的情況下將標(biāo)題嵌入文章的第一個(gè)段落中。

注意：Run-in 盒子已經(jīng)在CSS 2.1的標(biāo)準(zhǔn)中移除了，但可能會(huì)在CSS 3中作為一個(gè)實(shí)驗(yàn)性的內(nèi)容再次加入。因此最好不要將其用于正式項(xiàng)目。

由其他模型引入的盒子

除了行內(nèi)格式化上下文和塊格式化上下文之外，CSS還定義了幾種內(nèi)容模型，這些模型同樣可以應(yīng)用于元素。這些模型一般用來描述布局，它們可能會(huì)定義一些額外的盒子類型：

• 表格內(nèi)容模型可能會(huì)創(chuàng)建一個(gè)表格包裝器盒子和一個(gè)表格盒子，以及多個(gè)其他盒子如表格標(biāo)題盒子等
• 多列內(nèi)容模型可能會(huì)在容器盒子和內(nèi)容之間創(chuàng)建多個(gè)列盒子
• 實(shí)驗(yàn)性的網(wǎng)格內(nèi)容模型或flex-box內(nèi)容模型同樣會(huì)創(chuàng)建一些其他種類的盒子

定位規(guī)則
一旦生成了盒子以后，CSS引擎就需要定位它們以完成布局。下面是定位盒子時(shí)所使用的規(guī)則：

• 普通流：按照次序依次定位每個(gè)盒子
• 浮動(dòng)：將盒子從普通流中單獨(dú)拎出來，將其放到外層盒子的某一邊
• 絕對(duì)定位：按照絕對(duì)位置來定位盒子，其位置根據(jù)盒子的包含元素所建立的絕對(duì)坐標(biāo)系來計(jì)算，因此絕對(duì)定位元素有可能會(huì)覆蓋其他元素

普通流介紹

在普通流中，盒子會(huì)依次放置。在塊格式化上下文中，盒子在垂直方向依次排列；而在行內(nèi)格式化上下文中，盒子則水平排列。當(dāng)CSS的 position 屬性為 static 或 relative，并且 float 為 none 時(shí)，其布局方式為普通流。

浮動(dòng)介紹

在浮動(dòng)定位中，浮動(dòng)盒子會(huì)浮動(dòng)到當(dāng)前行的開始或尾部位置。這會(huì)導(dǎo)致普通流中的文本及其他內(nèi)容會(huì)“流”到浮動(dòng)盒子的邊緣處，除非元素通過 clear 清除了前面的浮動(dòng)。一個(gè)盒子的 float 值不為 none，并且其 position 為 static 或 relative 時(shí)，該盒子為浮動(dòng)定位。如果將 float 設(shè)置為 left，浮動(dòng)盒子會(huì)定位到當(dāng)前行盒子的開始位置（左側(cè)），如果設(shè)置為 right，浮動(dòng)盒子會(huì)定位到當(dāng)前行盒子的尾部位置（右側(cè)）。不管是左浮動(dòng)還是右浮動(dòng)，行盒子都會(huì)伸縮以適應(yīng)浮動(dòng)盒子的大小。

絕對(duì)定位介紹

在絕對(duì)定位中，盒子會(huì)完全從當(dāng)前流中移除，并且不會(huì)再與其有任何聯(lián)系（譯注：此處僅指定位和位置計(jì)算，而絕對(duì)定位的元素在文檔樹中仍然與其他元素有父子或兄弟等關(guān)系），其位置會(huì)使用 top、bottom、left 和 right

相對(duì)其包含塊進(jìn)行計(jì)算。如果元素的 position 為 absolute 或 fixed，該元素為絕對(duì)定位。

對(duì)固定位置的元素來說，其包含塊為整個(gè)視口，該元素相對(duì)視口進(jìn)行絕對(duì)定位，因此滾動(dòng)時(shí)元素的位置并不會(huì)改變。

參考資料MDN文檔：https://developer.mozilla.org...

你可能喜歡

打開微信掃一掃關(guān)注早讀君，每天早晨為你推送前端知識(shí)，度過擠地鐵坐公交的時(shí)光

總結(jié)

以上是生活随笔為你收集整理的「前端早读君007」css进阶之彻底理解视觉格式化模型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。