CSS篇 第9章 Visual Formatting Model 部分翻译
? 為了弄明白BFC、IFC以及定位、流的問題，翻譯部分Visual Formatting Model章節(jié)要點(diǎn)，如下：
注：當(dāng)且屬首次翻譯，特別粗糙，并無與實(shí)戰(zhàn)結(jié)合，請(qǐng)勿相信，僅供參考
翻譯約定：
| 中文名 | 英文名 | 示例描述 |
| 瀏覽器 | User agents | ? |
| 框 | box? | ? |
| 元素 | element | ? |
| 塊級(jí)元素 | block-level element | ? |
| 定位機(jī)制 | positioning scheme | ? |
| 內(nèi)容塊 | containing block | ? |
| 框的渲染/生成 | box generation | ? |
| 塊級(jí)框 | block-level box | 如：display屬性為“block”、“l(fā)ist-item”、“table”的元素，table框、可替換元素 |
| 塊級(jí)容器框 | block container box | 如：不可替換的inline-block、不可替換的table cell |
| 塊框 | block box | 即屬于塊級(jí)框、又屬于塊級(jí)容器框 |
| 行內(nèi)級(jí)框 | inline-level box | 如：display屬性值為"inline"、“inline-table”，“inline-block"的元素 |
| 行內(nèi)框 | inline box | 如：大部分行內(nèi)級(jí)框?qū)儆谛袃?nèi)框，但是以下不屬于行內(nèi)框：可替換的行內(nèi)級(jí)元素、inline-block元素、inline-table元素 |
| 原子性行內(nèi)級(jí)框 ? ? ? ? ? | atomic inline-level block ? ? ? ?? | 如：可替換的行內(nèi)級(jí)元素(如：input)、inline-block元素、inline-table元素 |
| 可替換元素 | Replaced element | 如：<img>, <object>, <video>; <textarea>, <input>;?匿名可替換元素 |
| 不可替換元素 | Non-replaced element | ? |
| 流外 | Out of flow | 如：根元素、浮動(dòng)元素、絕對(duì)定位元素 |
| 流內(nèi) | In flow | ? |
?
?部分關(guān)系圖:
?
塊級(jí)框、塊級(jí)容器框、塊框
行內(nèi)級(jí)框、參與IFC的框、行內(nèi)框
?
解釋：
1. 可替換元素
可替換元素是一種其展現(xiàn)不在CSS限制范圍的元素，也就是說：它的展現(xiàn)獨(dú)立于CSS。典型的可替換元素有：
1. <img>, <object>, <video>,? display屬性為：inline
2.?表單元素：<textarea>, <input>. display屬性為：inline-block
3.?有些元素在特定情況下才屬于可替換元素，如：<audio>, <canvas>， display屬性為：inline
4.?使用CSS屬性content插入的內(nèi)容稱為匿名可替換元素。
這類元素的典型特點(diǎn)是：沒有結(jié)束標(biāo)簽，因此開始結(jié)束標(biāo)簽之間也沒有內(nèi)容，內(nèi)容通過屬性（如：value）來指定；你也可以理解為：該標(biāo)簽會(huì)被外面的資源所代替。
2. 不可替換元素：
除上面之外的所有HTML元素稱為不可替換元素。
?
翻譯正文：
9. Visual Formatting Model 可視化排版模型（簡稱：VFM）
9.1 ?VFM介紹
本章和下一章描述了VFM：瀏覽器將DOM樹轉(zhuǎn)換為可視化的過程。
VMF中，DOM樹中的每個(gè)元素根據(jù)框模型生成0或多個(gè)框。這些框的布局是根據(jù)以下因素控制：
1. 框尺寸和類型（框生成方式）
2. 定位機(jī)制（常規(guī)流、浮動(dòng)、絕對(duì)定位）
3. DOM樹中元素間的關(guān)系
4. 外部因素（例如：viewport尺寸、圖片的內(nèi)在尺寸等）
（跳過Continuous media, paged media）
VFM并沒有規(guī)定排版的所有方面（如：letter-spacing算法），本規(guī)范也不會(huì)講到不同瀏覽器對(duì)排版處理的差異。
9.1.1 viewport
（譯者注：跳過不譯）
9.1.2 內(nèi)容塊
CSS2.1中，許多框的position和size是根據(jù)其內(nèi)容塊計(jì)算的。一般來說，一個(gè)DOM元素生成的框會(huì)被后代框當(dāng)做內(nèi)容塊，我們俗稱：一個(gè)框?yàn)楹蟠?jié)點(diǎn)“建立”了內(nèi)容塊。短語："一個(gè)框的內(nèi)容塊"指的是"包圍這個(gè)框的內(nèi)容塊"，并不是這個(gè)框生成的內(nèi)容塊。
每一個(gè)框都是根據(jù)它的內(nèi)容塊來定位，但并不總是限制于內(nèi)容塊中，因?yàn)樗锌赡軙?huì)（溢出）overflow；
關(guān)于內(nèi)容塊尺寸計(jì)算的詳細(xì)信息請(qǐng)參考下章。
9.2 框的渲染/生成
本小節(jié)討論了CSS2.1中生成的框的類型，類型的不同會(huì)影響框在VFM中的處理方式。以下的display屬性用于指定框的類型。
9.2.1 塊級(jí)元素、塊級(jí)框
DOM源碼中，按照塊排版的元素稱為塊級(jí)元素（Block-level element）(如：paragraph對(duì)應(yīng)的p標(biāo)簽)，當(dāng)元素的display屬性為“block”、“l(fā)ist-item”、“table”時(shí)，該元素成為塊級(jí)元素；
每一個(gè)塊級(jí)元素都會(huì)生成一個(gè)"主塊級(jí)框"（Principal block-level box）用于包含后代框和生成的內(nèi)容，這個(gè)框會(huì)參與到定位機(jī)制和BFC中。部分塊級(jí)元素（如：“l(fā)ist-item”）會(huì)生成除了主塊框之外的額外框，這些額外框根據(jù)主塊級(jí)框的位置放置。
除了后面章節(jié)單獨(dú)介紹的table框、可替換元素，一個(gè)塊級(jí)框也是一個(gè)塊級(jí)容器框。一個(gè)塊級(jí)容器框要么只能包含塊級(jí)框、或者行內(nèi)框（建立一個(gè)IFC）。并非所有的塊級(jí)容器框都屬于塊級(jí)框：不可替換的inline-block、不可替換的table cell屬于塊級(jí)容器框，但不屬于塊級(jí)框。
同時(shí)屬于塊級(jí)框和塊級(jí)容器框的框稱為塊框。
塊級(jí)框、塊級(jí)容器框、塊框有時(shí)一概簡稱為"塊"。
9.2.1.1 匿名塊框
如下的一段HTML代碼：
假設(shè)div和p元素的display為block，那么div就擁有了行內(nèi)元素和塊級(jí)元素，為了簡化定義排版模型，我們假設(shè)存在一個(gè)匿名塊圍繞著文本some text。
換言之，如果塊級(jí)容器框（如：div元素）包含塊級(jí)框（如：p元素），那么我們強(qiáng)制塊級(jí)容器框只包含塊級(jí)框，即：將some text設(shè)置為塊級(jí)框，只不過是匿名的。
當(dāng)行內(nèi)框的代碼中包含塊級(jí)框時(shí)，這個(gè)行內(nèi)框（以及祖先行內(nèi)框）會(huì)被分成多段圍繞在這個(gè)塊級(jí)框上下，因此行內(nèi)框被打斷成兩段（即使其中一段是空文本），中間夾著塊級(jí)框?？紤]到上面簡化的排版模型，這些前后的行內(nèi)框被匿名塊框包圍，中間的那個(gè)塊級(jí)框成為匿名塊框的兄弟節(jié)點(diǎn)。當(dāng)這樣的行內(nèi)框遇到相對(duì)定位時(shí)，也會(huì)影響到其中的塊級(jí)框。
這種模型也會(huì)應(yīng)用到如下規(guī)則（p元素為inline，span為block）的代碼中：
p { display: inline } span { display: block } <P>This is anonymous text before the SPAN. <SPAN>This is the content of SPAN.</SPAN>This is anonymous text after the SPAN. </P>p元素包含了匿名文本C1、塊級(jí)元素C2、匿名文本C3，最終生成的框?yàn)?#xff1a;body代表一個(gè)塊框，包含了一個(gè)行內(nèi)框，這個(gè)行內(nèi)框內(nèi)部包含了：匿名塊框C1、span塊框、匿名塊框C2。
匿名框會(huì)從父框中繼承一些可被繼承的屬性（如：第一個(gè)例子中的div父框），不可繼承的屬性會(huì)有初始值。例如：匿名框的font會(huì)被繼承，但是外邊距是0。
設(shè)置在匿名框的父元素上的屬性也會(huì)應(yīng)用到元素本身和內(nèi)容上。例如：在p元素上設(shè)置border屬性，導(dǎo)致邊框會(huì)圍繞在C1（C1無右邊框）和C2（無左邊框）上。
針對(duì)行內(nèi)容器框設(shè)置邊框，部分瀏覽器會(huì)有其它的處理方式。（譯者注：跳過不譯）
9.2.2 行內(nèi)元素、行內(nèi)框
HTML代碼中，不會(huì)按照塊排版的元素稱為行內(nèi)元素。它的內(nèi)容處于一行中（如：p元素中的em元素，行內(nèi)圖片等）。display屬性值為"inline"、“inline-table”，“inline-block"的元素稱為行內(nèi)級(jí)框，這些框會(huì)參與到IFC（Inline Formatting Context）中。
當(dāng)一個(gè)元素即屬于行內(nèi)級(jí)，且內(nèi)容又參與到IFC中時(shí)，該元素稱為行內(nèi)框。不可替換元素的display屬性為inline時(shí)稱為行內(nèi)框。不屬于行內(nèi)框的行內(nèi)級(jí)框（例如：可替換行內(nèi)級(jí)元素、inline-block元素、inline-table元素）稱為："原子性行內(nèi)級(jí)框"，因?yàn)樗麄儠?huì)作為一個(gè)整體參與到IFC中。
9.2.2.1 匿名行內(nèi)框
塊容器元素內(nèi)部的任何直接子文本都必須按照行內(nèi)元素來處理（例外：內(nèi)部含有塊框時(shí)，會(huì)當(dāng)做匿名塊框處理）。
如下的一段代碼：
<p>Some <em>emphasized</em> text</p>p元素生成一個(gè)塊框，em元素生成一個(gè)行內(nèi)框，文本"Some"和"text"生成行內(nèi)框。后者稱為匿名行內(nèi)框，因?yàn)樗麄儧]有相關(guān)聯(lián)的行內(nèi)級(jí)元素將這些文本包圍起來。
匿名行內(nèi)框會(huì)從父塊框中繼承部分屬性，不可繼承屬性使用初始值。（如：匿名框從p元素繼承了color，但background卻是透明的（譯者注：chrome下background也繼承了））
由于"white-space"屬性不會(huì)生成匿名塊，因此空白內(nèi)容應(yīng)該會(huì)被重疊起來。
如果清楚匿名框在BFC、IFC中所屬的類型，那么規(guī)范統(tǒng)稱這些匿名行內(nèi)框、匿名塊框?yàn)槟涿颉?/p>
更多的匿名框?qū)⒃诤竺娼榻Btable排版時(shí)介紹。
9.2.3 Run-in框
display為run-in將在CSS3中定義。
9.2.4 display屬性
初始值 inline
下列各值的解釋：
block
元素生成塊框
inline-block
元素生成一個(gè)行內(nèi)級(jí)的塊容器框，對(duì)內(nèi)是一個(gè)塊框，對(duì)外則是一個(gè)原子性的行內(nèi)框。
list-item
元素生成多個(gè)行內(nèi)框，如：ul元素生成一個(gè)塊框，里面的li元素的display屬性默認(rèn)為：list-item。
none
元素不會(huì)出現(xiàn)在VFM中，不會(huì)生成框，也不會(huì)對(duì)外面的布局有影響。后代元素也不會(huì)生成框，為后代節(jié)點(diǎn)設(shè)置display屬性無法覆蓋這種方式。
table，... 元素生成類似于table的格式。
除了定位元素、浮動(dòng)元素、根元素外，display屬性計(jì)算出來的值就是設(shè)定的值。關(guān)于這三類的情況，請(qǐng)參考這一節(jié)”display、position、float的關(guān)系“。
雖然display屬性的初始值為inline，但瀏覽器的默認(rèn)樣式會(huì)覆蓋這一值。
9.3 定位機(jī)制
CSS2.1中，一個(gè)框會(huì)根據(jù)三種定位機(jī)制來布局：
1. 常規(guī)流 塊級(jí)框的塊排版、行內(nèi)級(jí)框的行內(nèi)排版、塊級(jí)框與行內(nèi)級(jí)框的相對(duì)定位
2. 浮動(dòng) 浮動(dòng)模型中，框首先按照常規(guī)流布局，然后從常規(guī)流中去除，接著移動(dòng)盡左或盡右的地方，它的內(nèi)容會(huì)跟隨移動(dòng)。
3. 絕對(duì)定位 該模型中，框直接從常規(guī)流中移除，然后根據(jù)這個(gè)框的內(nèi)容塊來計(jì)算位置
根元素、浮動(dòng)元素、絕對(duì)定位元素處于流外，不處于流外的其余元素處于流內(nèi)。元素A的流包含了元素A本身、和A里面的所有最近流外祖先元素為仍A的元素。
注意：根元素雖然處于流外，但是position屬性確屬于static
?
9.3.1 position屬性
CSS2.1中, position和float屬性決定了采用哪種定位機(jī)制來計(jì)算框的位置。
可選值： static, relative, absolute, fixed, inherit
初始值： static
各值的解釋：
static
該元素的框按照常規(guī)流布局，top, right, bottom, left屬性無效
relative
框根據(jù)它在常規(guī)流中的正常位置進(jìn)行偏移；該值對(duì)table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption元素?zé)o效。
absolute
框的位置根據(jù)框所在的內(nèi)容塊進(jìn)行定位
fixed
框根據(jù)當(dāng)前瀏覽器的視口定位（viewport），它不會(huì)隨著頁面的滾動(dòng)而移動(dòng)
多數(shù)瀏覽器會(huì)為根元素的position屬性賦值static。
?
9.3.2 框偏移：top, right, bottom, left
如果一個(gè)元素的position屬性不為static，則稱這個(gè)元素為定位元素。定位元素生成定位框，擁有以下四個(gè)屬性：
top
right
bottom
left
初始值 auto
賦值類型：
length
不允許負(fù)值
auto
對(duì)于不可替換元素，該值與所屬的屬性top，right, bottom, left有關(guān)。詳見絕對(duì)定位小節(jié)。
對(duì)于可替換元素，其效果取決于該元素本身的尺寸。詳見絕對(duì)定位小節(jié)。
9.4 常規(guī)流
常規(guī)流中，塊級(jí)框參與BFC，行內(nèi)級(jí)框參與IFC。
9.4.1 BFC
塊框會(huì)參與到所屬內(nèi)容塊為BFC的計(jì)算中，并非所有塊框都會(huì)為其子節(jié)點(diǎn)建立BFC。滿足下面任何一個(gè)條件即會(huì)建立BFC：
1. float元素不為none
2. 絕對(duì)定位元素（position不為static）
3. 不屬于塊框的塊容器框（如：inlien-block，table-cells, table-caption）
4. overflow屬性不為visible的塊框（除非...，譯者注：跳過不譯）
BFC中，框會(huì)按照垂直方向依次排列，相鄰的兩個(gè)塊級(jí)框的margin外邊距會(huì)發(fā)生重疊。
BFC中，每個(gè)框的左外邊緣貼在了內(nèi)容塊的左邊，即使該框?yàn)閒loat。
9.4.2 IFC
IFC中，行內(nèi)框水平排列，margin不會(huì)發(fā)生重疊，對(duì)應(yīng)的這個(gè)內(nèi)容塊成為行框。
行框的width是根據(jù)其內(nèi)容塊決定的，高度根據(jù)line-height計(jì)算規(guī)則決定。
（譯者注：跳過不譯）
9.7 display, position, float之間的關(guān)系：
影響框生成的三個(gè)屬性：display, position, float關(guān)系如下：
1. display為none，則position和float無效，不會(huì)生成框。
2. 否則如果position為absolute, fixed，則float計(jì)算為none；display按下表格轉(zhuǎn)換：inline變?yōu)閎lock
3. 否則如果float不為none，display按下表格轉(zhuǎn)換
4. 否則如果元素是根節(jié)點(diǎn)，display按下表格轉(zhuǎn)換
5. 否則按照display設(shè)定的值展示
| inline-table | table |
| inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block | block |
| others | same as specified |
總結(jié)：display的值可能會(huì)變的情況是：position屬性為absolute, fixed; 或者float不為none；或者根節(jié)點(diǎn)。
?
?匯總：
從其他博客匯總來BFC的相關(guān)資料：
BFC的用處：
1.?自適應(yīng)兩欄布局 原因：BFC的區(qū)域不會(huì)與float box重疊
2.?清除內(nèi)部浮動(dòng) 原因：計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算
3.?防止垂直 margin 重疊 ?原因：Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
BFC的特點(diǎn)：
如何新建BFC：
1. float不為none
2.?position為absolute或fixed
3.?display為inline-block, table-cell, table-caption, flex, inline-flex
4.?overflow不為visible
?
參考資料：
Replaced element
W3C?Visual formatting model
?前端精選文摘：BFC 神奇背后的原理
MDN Visual formatting model
?
轉(zhuǎn)載于:https://www.cnblogs.com/diydyq/p/4230308.html
總結(jié)
以上是生活随笔為你收集整理的CSS篇 第9章 Visual Formatting Model 部分翻译的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 百度王一男： DevOps 的前提是拆掉
- 下一篇： CSS中的px与物理像素、逻辑像素、1p