CSS中視覺(jué)格式化模型是什么

這篇文章主要講解了“CSS中視覺(jué)格式化模型是什么”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“CSS中視覺(jué)格式化模型是什么”吧！

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

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

　　盒子的尺寸：精確指定、由約束條件指定或沒(méi)有指定

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

　　inline-level）、塊盒子（block）

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

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

　　視口尺寸與位置

　　所包含的圖片的尺寸

　　其他的某些外部因素

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

　　盒子生成介紹

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

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

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

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

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

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

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

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

　　匿名塊盒子

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

　　CSS選擇器不能作用于匿名盒子(anonymousboxes)，所以它不能被樣式表賦予樣式。也就是說(shuō)，此時(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>

　　Someinlinetext

　　<p>followedbyaparagraph</p>

　　followedbymoreinlinetext.

　　</div>

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

　　2976188203-5c28f59186cda_articlex.png

　　顯示為：

　　Someinlinetext

　　followedbyaparagraph

　　followedbymoreinlinetext.

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

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

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

　　行內(nèi)級(jí)元素和行內(nèi)盒子節(jié)

　　如果一個(gè)元素的display屬性為inline、inline-block或inline-table，則稱(chēng)該元素為行內(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)格式化上下文（inlineformattingcontext）的創(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)建，則稱(chēng)其為原子行內(nèi)級(jí)盒子。而通過(guò)替換行內(nèi)級(jí)元素或display值為inline-block或inline-table的元素創(chuàng)建的盒子不會(huì)像行內(nèi)盒子一樣可以被拆分為多個(gè)盒子。

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

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

　　<style>span{

　　display:inline;/*defaultvalue*/

　　}</style>

　　<divstyle="width:20em;">

　　Thetextinthespan

　　<span>canbesplitinseverallinesasit</span>

　　isaninlinebox.

　　</div>

　　可能會(huì)顯示為：

　　Thetextinthespancanbesplitintoseveral

　　linesasitisaninlinebox.

　　而：

　　<style>span{

　　display:inline-block;

　　}</style>

　　<divstyle="width:20em;">

　　Thetextinthespan

　　<span>

　　cannotbesplitinseverallinesasit

　　</span>

　　isaninline-blockbox.

　　</div>

　　則可能顯示為：

　　Thetextinthespan

　　cannotbesplitintoseverallinesasitisan

　　inline-blockbox.

　　其中的“cannotbesplitintoseverallinesasit”永遠(yuǎn)不會(huì)換行。

　　匿名行內(nèi)盒子

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

　　一種常見(jiàn)的情況是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)容為空。

　　其他類(lèi)型的盒子

　　行盒子

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

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

　　Run-in盒子

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

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

　　由其他模型引入的盒子

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

　　表格內(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)建一些其他種類(lèi)的盒子

　　定位規(guī)則

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

　　普通流：按照次序依次定位每個(gè)盒子

　　浮動(dòng)：將盒子從普通流中單獨(dú)拎出來(lái)，將其放到外層盒子的某一邊

　　絕對(duì)定位：按照絕對(duì)位置來(lái)定位盒子，其位置根據(jù)盒子的包含元素所建立的絕對(duì)坐標(biāo)系來(lái)計(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)前行的開(kāi)始或尾部位置。這會(huì)導(dǎo)致普通流中的文本及其他內(nèi)容會(huì)“流”到浮動(dòng)盒子的邊緣處，除非元素通過(guò)clear清除了前面的浮動(dòng)。一個(gè)盒子的float值不為none，并且其position為static或relative時(shí)，該盒子為浮動(dòng)定位。如果將float設(shè)置為left，浮動(dòng)盒子會(huì)定位到當(dāng)前行盒子的開(kāi)始位置（左側(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ì)定位的元素在文檔樹(shù)中仍然與其他元素有父子或兄弟等關(guān)系），其位置會(huì)使用top、bottom、left和right

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

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

感謝各位的閱讀，以上就是“CSS中視覺(jué)格式化模型是什么”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)CSS中視覺(jué)格式化模型是什么這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！