資訊專欄INFORMATION COLUMN
摘要：視覺格式化模型瀏覽器在解析渲染我們所寫的內容，順序渲染普通文檔流。渲染結果如下圖這兒有一個知識點文檔流按我的理解就是在瀏覽器渲染顯示的一個模式，這個模式的特點自上而下，從左到右排列規則。如果不特殊指定，瀏覽器會默認當前的渲染是按文檔流模式。
CSS視覺格式化模型
瀏覽器在解析渲染我們所寫的html內容，順序渲染（普通文檔流）。
1
2
3
4
渲染結果如下圖
這兒有一個知識點：
1、文檔流：按我的理解就是html在瀏覽器渲染顯示的一個模式，這個模式的特點：自上而下，從左到右（排列規則）。如果不特殊指定，瀏覽器會默認當前的HTML渲染是按文檔流模式。
2、浮動：平時我們所知的脫離文檔流的一種方式，把html元素的布局更改，浮動在視圖層上
3、絕對定位：脫離文檔流的另外一種方式，也是渲染在視圖層上
這兒又有個知識點：css盒模型
盒模型是css渲染的時候抽象于html標簽在畫布所占有區域，由CSS引擎根據文檔中的內容所創建。
盒模型的關鍵屬性：內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)。
盒模型是有兩種標準的，一個是標準模型，一個是IE模型。
從圖中很直觀能看出來，兩種模型的寬度和高度的計算規則不一樣。
在css中，兩個模型的定義方式為：
/* 標準模型 */ box-sizing:content-box; /*IE模型*/ box-sizing:border-box;
視覺格式化模型會根據CSS盒子模型將文檔中的元素轉換為一個個盒子。
每個盒子的布局由以下因素決定：
盒子的尺寸：精確指定、由約束條件指定或沒有指定 盒子的類型：行內盒子（inline）、行內級盒子（inline-level）、原子行內級盒子（atomic inline-level）、塊盒子（block） 定位方案（positioning scheme）：普通流定位、浮動定位或絕對定位 文檔樹中的其它元素：即當前盒子的子元素或兄弟元素 視口尺寸與位置 所包含的圖片的尺寸 其他的某些外部因素
該模型會根據盒子的包含塊（containing block）的邊界來渲染盒子。通常，盒子會創建一個包含其后代元素的包含塊，但是盒子并不由包含塊所限制，當盒子的布局跑到包含塊的外面時稱為溢出（overflow）
在這兒把我們用到的術語做一個解釋說明：
塊：block，一個抽象的概念，一個塊在文檔流上占據一個獨立的區域，塊與塊之間在垂直方向上按照順序依次堆疊。 包含塊：containing block，包含其他盒子的塊稱為包含塊。 盒子：box，一個抽象的概念，由CSS引擎根據文檔中的內容所創建，主要用于文檔元素的定位、布局和格式化等用途。盒子與元素并不是一一對應的，有時多個元素會合并生成一個盒子，有時一個元素會生成多個盒子（如匿名盒子）。 塊級元素：block-level element，元素的 display 為 block、list-item、table 時，該元素將成為塊級元素。元素是否是塊級元素僅是元素本身的屬性，并不直接用于格式化上下文的創建或布局。 塊級盒子：block-level box，由塊級元素生成。一個塊級元素至少會生成一個塊級盒子，但也有可能生成多個（例如列表項元素）。我們查詢資料會看到：塊格式化上下文（Block Formatting Context，BFC），就是當前的區域。 塊盒子：block box，如果一個塊級盒子同時也是一個塊容器盒子（見下），則稱其為塊盒子。除具名塊盒子之外，還有一類塊盒子是匿名的，稱為匿名塊盒子（Anonymous block box），匿名盒子無法被CSS選擇符選中。 塊容器盒子：block container box或block containing box，塊容器盒子側重于當前盒子作為“容器”的這一角色，它不參與當前塊的布局和定位，它所描述的僅僅是當前盒子與其后代之間的關系。換句話說，塊容器盒子主要用于確定其子元素的定位、布局等。 注意：盒子分為“塊盒子”和“塊級盒子”兩種，但元素只有“塊級元素”，而沒有“塊元素”。下面的“行內級元素”也是一樣。 行內級元素：inline-level element，display 為 inline、inline-block、inline-table 的元素稱為行內級元素。與塊級元素一樣，元素是否是行內級元素僅是元素本身的屬性，并不直接用于格式化上下文的創建或布局。 行內級盒子：inline-level box，由行內級元素生成。行內級盒子包括行內盒子和原子行內級盒子兩種，區別在于該盒子是否參與行內格式化上下文的創建。行內格式化上下文（inline formatting context， IFC），就是當前區域。 行內盒子：inline box，參與行內格式化上下文創建的行內級盒子稱為行內盒子。與塊盒子類似，行內盒子也分為具名行內盒子和匿名行內盒子（anonymous inline box）兩種。 原子行內級盒子：atomic inline-level box，不參與行內格式化上下文創建的行內級盒子。原子行內級盒子一開始叫做原子行內盒子（atomic inline box），后被修正。原子行內級盒子的內容不會拆分成多行顯示。塊級元素與塊盒子
當元素的 display 為 block、list-item 或 table 時，該元素將成為塊級元素。一個塊級元素會被格式化成一個塊（例如文章的一個段落），默認按照垂直方向依次排列。
比較生硬的知識BFC，IFC，后面的說明中會用到：
BFC創建BFC區域的方式：
根元素或包含根元素的元素 浮動元素（元素的 float 不是 none） 絕對定位元素（元素的 position 為 absolute 或 fixed） 行內塊元素（元素的 display 為 inline-block） 表格單元格（元素的 display為 table-cell，HTML表格單元格默認為該值） 表格標題（元素的 display 為 table-caption，HTML表格標題默認為該值） 匿名表格單元格元素（元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table） overflow 值不為 visible 的塊元素 display 值為 flow-root 的元素 contain 值為 layout、content或 strict 的元素 彈性元素（display為 flex 或 inline-flex元素的直接子元素） 網格元素（display為 grid 或 inline-grid 元素的直接子元素） 多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1） column-span 為 all 的元素始終會創建一個新的BFC，即使該元素沒有包裹在一個多列容器中
BFC對浮動定位與清除浮動都很重要。浮動定位和清除浮動時只會應用于同一個BFC內的元素。浮動不會影響其它BFC中元素的布局，而清除浮動只能清除同一BFC中在它前面的元素的浮動。外邊距折疊也只會發生在屬于同一BFC的塊級元素之間
BFC區域內模型的規則：
1、內部的box會在垂直方向，一個接一個的放置 2、每個元素的margin box的左邊，與包含塊border box的左邊相接觸（對于從左往右的格式化，否則相反） 3、box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰box的margin會發生重疊 4、BFC的區域不會與浮動區域的box重疊 5、BFC是一個頁面上的獨立的容器，外面的元素不會影響BFC里的元素，反過來，里面的也不會影響外面的 6、計算BFC高度的時候，浮動元素也會參與計算
來看一個例子，margin重疊的問題：
Document 上
margin-bottom:30px;下
margin-top:50px;
上述視圖效果，上下邊距重疊取最大的值。
用BFC可以解決垂直margin重疊的問題
上
margin-bottom:30px;
每個塊級盒子都會參與塊格式化上下文（block formatting context）的創建，而每個塊級元素都會至少生成一個塊級盒子，即主塊級盒子（principal block-level box）。有一些元素，比如列表項會生成額外的盒子來放置項目符號，而那些會生成列表項的元素可能會生成更多的盒子。不過，多數元素只生成一個主塊級盒子。
主塊級盒子包含由后代元素生成的盒子以及內容，同時它也會參與定位方案。
定位規則：一旦生成了盒子以后，CSS引擎就需要定位它們以完成布局。下面是定位盒子時所使用的規則：
普通流：按照次序依次定位每個盒子 浮動：將盒子從普通流中多帶帶拎出來，將其放到外層盒子的某一邊 絕對定位：按照絕對位置來定位盒子，其位置根據盒子的包含元素所建立的絕對坐標系來計算，因此絕對定位元素有可能會覆蓋其他元素
一個塊級盒子可能也是一個塊容器盒子。塊容器盒子（block container box）要么只包含其它塊級盒子，要么只包含行內盒子并同時創建一個行內格式化上下文（inline formatting context）。
能夠注意到塊級盒子與塊容器盒子是不同的這一點很重要。前者描述了元素與其父元素和兄弟元素之間的行為，而后者描述了元素跟其后代之間的行為。有些塊級盒子并不是塊容器盒子，比如表格；而有些塊容器盒子也不是塊級盒子，比如非替換行內塊和非替換表格單元格。
一個同時是塊容器盒子的塊級盒子稱為塊盒子（block box）。
匿名塊盒子在某些情況下進行視覺格式化時，需要添加一些增補性的盒子，這些盒子不能用CSS選擇符選中，因此稱為匿名盒子（anonymous boxes）。
CSS選擇器不能作用于匿名盒子(anonymous boxes)，所以它不能被樣式表賦予樣式。也就是說，此時所有可繼承的 CSS 屬性值都為 inherit ，而所有不可繼承的 CSS 屬性值都為 initial。
塊包含盒子可能只包含行內級盒子，也可能只包含塊級盒子，但通常的文檔都會同時包含兩者，在這種情況下，就會在相鄰的行內級盒子外創建匿名塊盒子。
假如div和p標簽都保持默認樣式（即它們的 display 為 block）：
Some inline textfollowed by a paragraph
followed by more inline text.
此時會產生兩個匿名塊盒子：一個是
元素前面的那些文本（Some inline text），另一個是
元素后面的文本（followed by more inline text.）。此時會生成下面的塊結構：
對這兩個匿名盒子來說，程序員無法像
元素那樣控制它們的樣式，因此它們會從
元素的盒子則能夠用CSS指定背景顏色。類似地，兩個匿名盒子的文本顏色總是一樣的。
另一種會創建匿名塊盒子的情況是一個行內盒子中包含一或多個塊盒子。此時，包含塊盒子的盒子會拆分為兩個行內盒子，分別位于塊盒子的前面和后面。塊盒子前面的所有行內盒子會被一個匿名塊盒子包裹，塊盒子后面的行內盒子也是一樣。因此，塊盒子將成為這兩個匿名塊盒子的兄弟盒子。
如果有多個塊盒子，而它們中間又沒有行內元素，則會在這些盒子的前面和后面創建兩個匿名塊盒子：
假設
的 display 為 inline， 的 display 為 block：
Some inline text followed by a paragraph followed by more inline text.
此時會產生兩個匿名塊盒子：一個是 元素前面的文本（Some inline text），另一個是其之后的文本（followed by more inline text.）。此時會生成下面的塊結構：
如果一個元素的 display 屬性為 inline、inline-block 或 inline-table，則稱該元素為行內級元素。顯示時，它不會生成內容塊，但是可以與其他行內級內容一起顯示為多行。一個典型的例子是包含多種格式內容（如強調文本、圖片等）的段落，就可以由行內級元素組成。
行內級元素會生成行內級盒子，該盒子同時會參與行內格式化上下文（inline formatting context）的創建。行內盒子既是行內級盒子，也是一個其內容會參與創建其容器的行內格式化上下文的盒子，比如所有具有 display:inline 樣式的非替換盒子。如果一個行內級盒子的內容不參與行內格式化上下文的創建，則稱其為原子行內級盒子。而通過替換行內級元素或 display 值為 inline-block 或 inline-table 的元素創建的盒子不會像行內盒子一樣可以被拆分為多個盒子。
在同一個行內格式化上下文中，原子行內級盒子不能拆分成多行：
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”永遠不會換行。
IFC行內格式化上下文（inline formatting context）
行框(line boxes)
相對于BFC，在IFC中，框（boxes）一個接一個地水平排列，起點是包含塊的頂部。水平方向上的margin，border和padding在框之間得到保留。框在垂直方向上可以以不同的方式對齊：它們的頂部或底部對齊，或根據其中文字 的基線對齊。包含那些框的長方形區域，會形成一行，叫做行框。
行框的寬度有它的包含塊和其中的浮動元素決定。高度的確定由行高度計算規則決定。
行框的范圍
通常，行框的左邊接觸到包含塊的左邊，右邊接觸到其包含塊的右邊。然而，浮動元素可能會處于包含塊邊緣和行框邊緣之間。總之，盡管在相同的行內格式化上下文中的行框通常擁有相同的寬度（包含塊的寬度），它們可能會因浮動元素縮短了可用寬度，而在寬度上發生變化。同一行內格式化上下文中行框通常高度不一樣（如，一行包含了一個高的圖形，而其它行只包含文本）。
例子：
Document float inline box primary
顯示結果：
行內框可能被分割
如果幾個行內框在水平方向無法放入一個行框內，它們可以分配在兩個或多個垂直堆疊的行框中。因此，一個段落就是行框在垂直方向上的隊疊。行框在堆疊時沒有垂直方向上的分割且永不重疊。
如果一個行內框超出包含它的行框的寬度，它會被分割成幾個框，并且這些框會被分布到幾個行框內。如果一個行框不能被分割（例如：行內框只包含單個字符，或者語言特殊的斷字規則不允許在行內框里換行，或者行內框受到帶有“nowrap“或”pre“值的”white-space“特性的影響），這時，行內框會益處行框。
如果一個行內框被分割，margin，padding和border在所有分割處沒有視覺效果。
行內框還可能由于雙向文本處理（bidirectional text processing）而在同一個行框內被分割為好幾個框。具體看上面的例子。
行內框的對齊
1)、行內框在行框中垂直方向上的對齊
行框的高度總是足夠容納所包含的所有框。不過，它可能高于它包含的最高的框（例如：框對齊會引起基線對齊）。當一個框B的高度小雨包含它的行框的高度時，B在行框中垂直方向上的對齊決定于”vertical-aligin“的特性。”vertical-align“默認值基線（baseline）對齊。
貼一個關于基線（baseline）的圖，最直觀：
2)、行內框在行框中水平方向上的對齊
當一行中行內寬度的總和小于包含它們的行框的寬，它們在水平方向上的對齊，取決于"text-align"特性。如果其值是”justify“，用戶端也可以拉伸行內框（除了”inline-table“和”inline-block“框）中的空間和文字。
空的行內框應該被忽略
不包含文本，保留空白符，margin/padding/border非0的行內元素，以及其他常規流中的內容（比如，圖片，inline-blocks和inline-tables），并且不是以換行結束的行框，必須被當作0高度行框對待。就外邊距折疊而言，這種行框必須被忽略。
匿名行內盒子類似于塊盒子，CSS引擎有時候也會自動創建一些行內盒子。這些行內盒子無法被選擇符選中，因此是匿名的，它們從父元素那里繼承那些可繼承的屬性，其他屬性保持默認值 initial。
一種常見的情況是CSS引擎會自動為直接包含在塊盒子中的文本創建一個行內格式化上下文，在這種情況下，這些文本會被一個足夠大的匿名行內盒子所包含。但是如果僅包含空格則有可能不會生成匿名行內盒子，因為空格有可能會由于 white-space 的設置而被移除，從而導致最終的實際內容為空。
浮動在浮動定位中，浮動盒子會浮動到當前行的開始或尾部位置。這會導致普通流中的文本及其他內容會“流”到浮動盒子的邊緣處，除非元素通過 clear 清除了前面的浮動。
一個盒子的 float 值不為 none，并且其 position 為 static 或 relative 時，該盒子為浮動定位。如果將 float 設置為 left，浮動盒子會定位到當前行盒子的開始位置（左側），如果設置為 right，浮動盒子會定位到當前行盒子的尾部位置（右側）。不管是左浮動還是右浮動，行盒子都會伸縮以適應浮動盒子的大小。
絕對定位在絕對定位中，盒子會完全從當前流中移除，并且不會再與其有任何聯系（譯注：此處僅指定位和位置計算，而絕對定位的元素在文檔樹中仍然與其他元素有父子或兄弟等關系），其位置會使用 top、bottom、left 和 right 相對其包含塊進行計算。
如果元素的 position 為 absolute 或 fixed，該元素為絕對定位。
對固定位置的元素來說，其包含塊為整個視口，該元素相對視口進行絕對定位，因此滾動時元素的位置并不會改變。
GFCGFC(GridLayout Formatting Contexts)意為“網格布局格式化上下文”當一個元素設置為display:grid的時候，此元素將獲得一個獨立的渲染區域，可以在網格容器上定義網格行和列，為每一個網格定義位置和空間。GFC和table的區別在于GridLayout會有更加豐富的屬性來控制行列，控制對齊以及更為精細的渲染。
FFCFFC(Flex Formatting Contexts)意為“自適應格式化上下文”,display值為flex或者inline-flex的元素將會生成自適應容器，當前只有谷歌和火狐支持該屬性，不過在移動端幾乎沒有障礙(移動端是chrome和Safari的天下)。flex box由伸縮容器和伸縮子元素組成。通過設置元素display:flex/inline-flex可以得到伸縮容器，前者為塊級元素，后者為行內元素。伸縮容器外元素不受影響。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117157.html
摘要：并且這種過程遵循標準的描述只要不是和絕對定位方式布局的，都在普通流里面。定位相對定位在普通流之中，是相對于它在普通流中的位置中進行移動，元素占據原來位置絕對定位脫離普通流，不占據空間相對于距離它最近的那個已定位的祖先相對絕對元素決定的。 視覺格式化模型 頁面(文檔樹)可以想象成是由一個個的Box組合而成的，而視覺格式化模型(Visual formatting model)是一套規則，將...
摘要：中各種布局的背后，實質上是各種的組合。相反，一些塊容器盒，比如非替換行內塊及非替換表格單元格，不是塊級盒。描述元素跟它的后代之間的影響。行盒行盒由行內格式化上下文產生的盒，用于表示一行。彈性容器外和彈性項目內的一切元素都不受影響。 CSS中各種布局的背后，實質上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。 盒模型(Box M...
摘要：官方說法就是它規定了用戶端在媒介中如何處理文檔樹。是的包含塊，同時又是的包含塊，不是絕對的。因此稱為匿名盒子。行內盒子行內級元素會生成行內級盒子，該盒子同時會參與行內格式化上下文的創建。如果只有一個值指定為，則其使用的值來自相等。 作者：陳大魚頭 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...
摘要：詳見權威指南塊級元素即塊級元素是源文檔中被格式化為塊的元素，或者屬性為的元素。概念顧名思義塊級格式化上下文。每個元素的的左邊，與包含塊的左邊相接觸對于從左往右的格式化，否則相反。 情景：浮動的高度塌陷時，使用overflow：hidden可使父元素將浮動的子元素包含起來，解決問題。但背后的原理是什么？這就是今天要談的BFC。 在將BFC之前需要先了解幾個概念： 盒子模型（Box mo...
摘要：塊級盒參與塊格式化上下文。行內級盒參與行內格式化上下文塊格式化上下文行內格式化上下文相對定位浮動盒就是一個在當前行向左或向右移動的盒。浮動絕對定位絕對定位模型中，一個盒會有相對于其包含塊的明確偏移，它會從常規流中全部移除不會影響后面的兄弟。 在可視化格式模型(Visual formatting model)當中,文檔樹中的每個元素根據其盒模型生成0個或多個盒.這些盒的布局由(以下因素)...
閱讀 3313·2023-04-26 00:58
閱讀 1268·2021-09-22 16:04
閱讀 3311·2021-09-02 15:11
閱讀 1554·2019-08-30 15:55
閱讀 2339·2019-08-30 15:55
閱讀 3247·2019-08-23 18:41
閱讀 3458·2019-08-23 18:18
閱讀 2751·2019-08-23 17:53
