小編給大家分享一下CSS中視覺格式化模型有什么用，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
臨河ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！
對于部分前端工程師來講，有時(shí)候CSS令他們很頭疼，明明設(shè)置了某個(gè)樣式，但是布局就是不起作用。
如果你也有這種問題，那么是時(shí)候?qū)W習(xí)下什么是css視覺格式化模型了。知己知彼方能解決問題。
CSS 視覺格式化模型（visual formatting model）是用來處理和在視覺媒體上顯示文檔時(shí)使用的計(jì)算規(guī)則。該模型是 CSS 的基礎(chǔ)概念之一。
視覺格式化模型會根據(jù)CSS盒子模型將文檔中的元素轉(zhuǎn)換為一個(gè)個(gè)盒子，每個(gè)盒子的布局由以下因素決定：
盒子的尺寸：精確指定、由約束條件指定或沒有指定
盒子的類型：行內(nèi)盒子（inline）、行內(nèi)級盒子（inline-level）、原子行內(nèi)級盒子（atomic
inline-level）、塊盒子（block）
定位方案（positioning scheme）：普通流定位、浮動定位或絕對定位
文檔樹中的其它元素：即當(dāng)前盒子的子元素或兄弟元素
視口尺寸與位置
所包含的圖片的尺寸
其他的某些外部因素
該模型會根據(jù)盒子的包含塊（containing block）的邊界來渲染盒子。通常，盒子會創(chuàng)建一個(gè)包含其后代元素的包含塊，但是盒子并不由包含塊所限制，當(dāng)盒子的布局跑到包含塊的外面時(shí)稱為溢出（overflow）
盒子的生成是 CSS 視覺格式化模型的一部分，用于從文檔元素生成盒子。盒子有不同的類型，不同類型的盒子的格式化方法也有所不同。盒子的類型取決于 CSS 的display屬性。
當(dāng)元素的 display為 block、list-item或 table時(shí)，該元素將成為塊級元素。一個(gè)塊級元素會被格式化成一個(gè)塊（例如文章的一個(gè)段落），默認(rèn)按照垂直方向依次排列。
每個(gè)塊級盒子都會參與塊格式化上下文（block formatting context）的創(chuàng)建，而每個(gè)塊級元素都會至少生成一個(gè)塊級盒子，即主塊級盒子（principal block-level box）。有一些元素，比如列表項(xiàng)會生成額外的盒子來放置項(xiàng)目符號，而那些會生成列表項(xiàng)的元素可能會生成更多的盒子。不過，多數(shù)元素只生成一個(gè)主塊級盒子。
主塊級盒子包含由后代元素生成的盒子以及內(nèi)容，同時(shí)它也會參與定位方案。
一個(gè)塊級盒子可能也是一個(gè)塊容器盒子。塊容器盒子（block container box）要么只包含其它塊級盒子，要么只包含行內(nèi)盒子并同時(shí)創(chuàng)建一個(gè)行內(nèi)格式化上下文（inline formatting context）。
能夠注意到塊級盒子與塊容器盒子是不同的這一點(diǎn)很重要。前者描述了元素與其父元素和兄弟元素之間的行為，而后者描述了元素跟其后代之間的行為。有些塊級盒子并不是塊容器盒子，比如表格；而有些塊容器盒子也不是塊級盒子，比如非替換行內(nèi)塊和非替換表格單元格。
一個(gè)同時(shí)是塊容器盒子的塊級盒子稱為塊盒子（block box）。
匿名塊盒子
在某些情況下進(jìn)行視覺格式化時(shí)，需要添加一些增補(bǔ)性的盒子，這些盒子不能用CSS選擇符選中，因此稱為匿名盒子（anonymous boxes）。
CSS選擇器不能作用于匿名盒子(anonymous boxes)，所以它不能被樣式表賦予樣式。也就是說，此時(shí)所有可繼承的 CSS 屬性值都為 inherit ，而所有不可繼承的 CSS 屬性值都為 initial。
塊包含盒子可能只包含行內(nèi)級盒子，也可能只包含塊級盒子，但通常的文檔都會同時(shí)包含兩者，在這種情況下，就會在相鄰的行內(nèi)級盒子外創(chuàng)建匿名塊盒子。
示例節(jié)
考慮下面的HTML代碼，假設(shè) 和 都保持默認(rèn)的樣式（即它們的 display 為 block）：
Some inline textfollowed by a paragraph
followed by more inline text.
此時(shí)會產(chǎn)生兩個(gè)匿名塊盒子：一個(gè)是 元素前面的那些文本（Some inline text），另一個(gè)是元素后面的文本（followed by more inline text.）。此時(shí)會生成下面的塊結(jié)構(gòu)：
顯示為：
Some inline text followed by a paragraph followed by more inline text.
對這兩個(gè)匿名盒子來說，程序員無法像
元素那樣控制它們的樣式，因此它們會從
那里繼承那些可繼承的屬性，如 color。其他不可繼承的屬性則會設(shè)置為 initial，比如，因?yàn)闆]有為它們指定 background-color，因此其具有默認(rèn)的透明背景，而 元素的盒子則能夠用CSS指定背景顏色。類似地，兩個(gè)匿名盒子的文本顏色總是一樣的。
另一種會創(chuàng)建匿名塊盒子的情況是一個(gè)行內(nèi)盒子中包含一或多個(gè)塊盒子。此時(shí)，包含塊盒子的盒子會拆分為兩個(gè)行內(nèi)盒子，分別位于塊盒子的前面和后面。塊盒子前面的所有行內(nèi)盒子會被一個(gè)匿名塊盒子包裹，塊盒子后面的行內(nèi)盒子也是一樣。因此，塊盒子將成為這兩個(gè)匿名塊盒子的兄弟盒子。
如果有多個(gè)塊盒子，而它們中間又沒有行內(nèi)元素，則會在這些盒子的前面和后面創(chuàng)建兩個(gè)匿名塊盒子。
行內(nèi)級元素和行內(nèi)盒子節(jié)
如果一個(gè)元素的display屬性為inline、inline-block或inline-table，則稱該元素為行內(nèi)級元素。顯示時(shí)，它不會生成內(nèi)容塊，但是可以與其他行內(nèi)級內(nèi)容一起顯示為多行。一個(gè)典型的例子是包含多種格式內(nèi)容（如強(qiáng)調(diào)文本、圖片等）的段落，就可以由行內(nèi)級元素組成。
行內(nèi)級元素會生成行內(nèi)級盒子，該盒子同時(shí)會參與行內(nèi)格式化上下文（inline formatting context）的創(chuàng)建。行內(nèi)盒子既是行內(nèi)級盒子，也是一個(gè)其內(nèi)容會參與創(chuàng)建其容器的行內(nèi)格式化上下文的盒子，比如所有具有display:inline樣式的非替換盒子。如果一個(gè)行內(nèi)級盒子的內(nèi)容不參與行內(nèi)格式化上下文的創(chuàng)建，則稱其為原子行內(nèi)級盒子。而通過替換行內(nèi)級元素或display值為inline-block或inline-table的元素創(chuàng)建的盒子不會像行內(nèi)盒子一樣可以被拆分為多個(gè)盒子。
注意：開始的時(shí)候，原子行內(nèi)級盒子叫做原子行內(nèi)盒子，這并不準(zhǔn)確，因?yàn)樗鼈儾⒉皇切袃?nèi)盒子。后來在一次勘誤時(shí)修正了這一問題。不過，當(dāng)你見到某些文章中使用了“原子行內(nèi)盒子”的時(shí)候，你盡可以將其理解為“原子行內(nèi)級盒子”，因?yàn)檫@僅僅是一個(gè)名字的修改。
在同一個(gè)行內(nèi)格式化上下文中，原子行內(nèi)級盒子不能拆分成多行：
The text in the span can be split in several lines as it is an inline box.
可能會顯示為：
The text in the span can be split into several lines as it is an inline box.
而：
The text in the span cannot be split in several lines as it is an inline-block box.
則可能顯示為：
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)不會換行。
類似于塊盒子，CSS引擎有時(shí)候也會自動創(chuàng)建一些行內(nèi)盒子。這些行內(nèi)盒子無法被選擇符選中，因此是匿名的，它們從父元素那里繼承那些可繼承的屬性，其他屬性保持默認(rèn)值initial。
一種常見的情況是CSS引擎會自動為直接包含在塊盒子中的文本創(chuàng)建一個(gè)行內(nèi)格式化上下文，在這種情況下，這些文本會被一個(gè)足夠大的匿名行內(nèi)盒子所包含。但是如果僅包含空格則有可能不會生成匿名行內(nèi)盒子，因?yàn)榭崭裼锌赡軙捎趙hite-space的設(shè)置而被移除，從而導(dǎo)致最終的實(shí)際內(nèi)容為空。
行盒子由行內(nèi)格式化上下文創(chuàng)建，用來顯示一行文本。在塊盒子內(nèi)部，行盒子總是從塊盒子的一邊延伸到另一邊（譯注：即占據(jù)整個(gè)塊盒子的寬度）。當(dāng)有浮動元素時(shí)，行盒子會從向左浮動的元素的右邊緣延伸到向右浮動的元素的左邊緣。
行盒子更多是以技術(shù)性目的而存在的，Web開發(fā)者通常不需要關(guān)心。
Run-in 盒子通過display:run-in來定義，它可以是塊盒子，也可以是行內(nèi)盒子，這取決于緊隨其后的盒子的類型。Run-in 盒子可以用來在可能的情況下將標(biāo)題嵌入文章的第一個(gè)段落中。
注意：Run-in 盒子已經(jīng)在CSS 2.1的標(biāo)準(zhǔn)中移除了，但可能會在CSS 3中作為一個(gè)實(shí)驗(yàn)性的內(nèi)容再次加入。因此最好不要將其用于正式項(xiàng)目。
除了行內(nèi)格式化上下文和塊格式化上下文之外，CSS還定義了幾種內(nèi)容模型，這些模型同樣可以應(yīng)用于元素。這些模型一般用來描述布局，它們可能會定義一些額外的盒子類型：
表格內(nèi)容模型可能會創(chuàng)建一個(gè)表格包裝器盒子和一個(gè)表格盒子，以及多個(gè)其他盒子如表格標(biāo)題盒子等
多列內(nèi)容模型可能會在容器盒子和內(nèi)容之間創(chuàng)建多個(gè)列盒子
實(shí)驗(yàn)性的網(wǎng)格內(nèi)容模型或flex-box內(nèi)容模型同樣會創(chuàng)建一些其他種類的盒子
定位規(guī)則
一旦生成了盒子以后，CSS引擎就需要定位它們以完成布局。下面是定位盒子時(shí)所使用的規(guī)則：
普通流：按照次序依次定位每個(gè)盒子
浮動：將盒子從普通流中單獨(dú)拎出來，將其放到外層盒子的某一邊
絕對定位：按照絕對位置來定位盒子，其位置根據(jù)盒子的包含元素所建立的絕對坐標(biāo)系來計(jì)算，因此絕對定位元素有可能會覆蓋其他元素
在普通流中，盒子會依次放置。在塊格式化上下文中，盒子在垂直方向依次排列；而在行內(nèi)格式化上下文中，盒子則水平排列。當(dāng)CSS的 position 屬性為 static 或 relative，并且 float 為 none 時(shí)，其布局方式為普通流。
在浮動定位中，浮動盒子會浮動到當(dāng)前行的開始或尾部位置。這會導(dǎo)致普通流中的文本及其他內(nèi)容會“流”到浮動盒子的邊緣處，除非元素通過 clear 清除了前面的浮動。一個(gè)盒子的 float 值不為 none，并且其 position 為 static 或 relative 時(shí)，該盒子為浮動定位。如果將 float 設(shè)置為 left，浮動盒子會定位到當(dāng)前行盒子的開始位置（左側(cè)），如果設(shè)置為 right，浮動盒子會定位到當(dāng)前行盒子的尾部位置（右側(cè)）。不管是左浮動還是右浮動，行盒子都會伸縮以適應(yīng)浮動盒子的大小。
在絕對定位中，盒子會完全從當(dāng)前流中移除，并且不會再與其有任何聯(lián)系（譯注：此處僅指定位和位置計(jì)算，而絕對定位的元素在文檔樹中仍然與其他元素有父子或兄弟等關(guān)系），其位置會使用 top、bottom、left 和 right
相對其包含塊進(jìn)行計(jì)算。如果元素的 position 為 absolute 或 fixed，該元素為絕對定位。
對固定位置的元素來說，其包含塊為整個(gè)視口，該元素相對視口進(jìn)行絕對定位，因此滾動時(shí)元素的位置并不會改變。
看完了這篇文章，相信你對CSS中視覺格式化模型有什么用有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
重慶分公司
重慶分公司
