視覺格式化模型(Visual formatting model)

jokester 發布于2019-08-30 15:53 / 1269人閱讀

摘要：塊級盒參與塊格式化上下文。行內級盒參與行內格式化上下文塊格式化上下文行內格式化上下文相對定位浮動盒就是一個在當前行向左或向右移動的盒。浮動絕對定位絕對定位模型中，一個盒會有相對于其包含塊的明確偏移，它會從常規流中全部移除不會影響后面的兄弟。

在可視化格式模型(Visual formatting model)當中,文檔樹中的每個元素根據其盒模型生成0個或多個盒.這些盒的布局由(以下因素)控制:

盒尺寸與類型

定位模式(常規流,浮動與絕對定位)

文檔樹中元素間的關系

外部信息(例如,視口大小,內含圖片的固定尺寸等等)

包含塊(containing blocks)

在 CSS2.1 中，很多框的定位和尺寸的計算，都取決于一個矩形的邊界，這個矩形，被稱作是包含塊( containing block )。一般來說，(元素)生成的框會扮演它子孫元素包含塊的角色；我們稱之為：一個(元素的)框為它的子孫節點建造了包含塊。包含塊是一個相對的概念。

絕對定位元素的包含塊

如果其祖先元素是行內元素,則包含塊取決于其祖先元素的direction特性

如果direction是ltr,包含塊的頂,左邊是祖先元素生成的第一個框的頂、左內邊距邊界(padding edges),右、下邊是祖先元素生成的最后一個框的右,下內邊距邊界(padding edges)

包含塊的寬度可能是負的

如果direction是rtl,包含塊的頂、右邊是祖先元素生成的的第一個框的頂、右內邊距邊界(padding edges),左、下邊是祖先元素生成的最后一個框的左、下內邊距邊界(padding edges)

其他情況下，如果祖先元素不是行內元素，那么包含塊的區域應該是祖先元素(absolute、relative 或者 fixed)的內邊界

KB008: 包含塊( Containing block )

視口(viewport)

連續媒體的用戶代理一般會給用戶提供一個視口（屏幕上的一個窗口或者視圖區域），用戶通過它來查閱文檔。視口尺寸變化（見初始包含塊）時，用戶代理可能會改變文檔的布局

當視口比渲染文檔的畫布區域小時，用戶代理應該提供一種滾動機制。一個畫布最多對應一個視口，但用戶代理可能會渲染到多個畫布上（即提供同一文檔的不同視圖）

盒的生成(Box generation)

CSS視覺格式化模型的一部分工作是從文檔元素生成盒.生成的盒擁有不同類型,并對視覺格式化模型的處理產生影響.生成盒的類型取決于CSS屬性display

塊級元素(Block-level elements)

當元素的CSS屬性display為block,list-item或table時,它就是塊級元素

塊級元素視覺上呈現為塊,豎直排列

塊級盒(block-level box)

塊級盒用于描述他與父元素和兄弟元素之間的表現

塊級盒參與塊格式化上下文(block formatting context)

每個塊級元素至少生成一個塊級盒,稱為主要塊級盒(principal block-level box).一些元素,比如

,生成額外的盒賴放置項目符號,不過多數元素只生成一個主要塊級盒

主要塊級盒將包含后代元素生成的盒以及生成的內容

主要塊級盒是可以使用定位方案(position scheme)的盒

塊容器盒(block container box)

塊容器盒描述跟它后代之間的影響

一個塊級盒也可能是塊容器盒

塊容器盒(block container box)只包含其它塊級盒,或生成一個行內格式化上下文(inline formatting context),由此只包含行內盒

有些塊級盒,比如表格,可替換元素不是塊容器盒.相反,一些塊容器盒.比如非替換行內塊及非替換表格單元格,不是塊級盒

同時塊容器盒的塊級盒稱為塊盒(block boxes)

匿名塊盒(Anonymous block boxes)

有時候需要添加補充性盒,這些盒稱為匿名盒(Anonymous block boxes),它們沒有名字,不能被CSS選擇符選中

不能被CSS選擇符選中意味著不能用樣式表添加樣式.這意味著對于可繼承屬性,取父元素值.不可繼承屬性,取初始值

塊容器盒要么只包含行內級盒(inline-level box),要么只包含塊級盒(block-level box).但通常文檔會同時包含兩者.在這種情況下,將創建匿名塊盒來包含毗鄰的行內級盒

 
      Some inline text
      followed by a paragraph
      followed by more inline text.

將創建兩個匿名塊盒,一個包含

前面的文本(Some inline text),一個包含

后面的文本(followed by more inline text),結構如下:

另一種將創建匿名塊盒的情況是,一個行內盒包含了一個或幾個塊盒.在這種情況下,包含塊盒的盒將拆分為兩個行內盒放置于塊盒前后,然后分別由兩個匿名塊盒包含.這樣塊盒就與兩個包含行內元素的匿名塊盒形成了兄弟關系.

如果行內盒包含多個塊盒,并且這些塊盒之間沒有夾雜內容,將在這些塊盒前后創建匿名塊盒

第一個匿名盒塊級盒子第二個匿名盒

行內級元素(inline-level elements)

當元素的CSS屬性display為inline,inline-block或inline-table時,稱它為行內級元素

視覺上它將內容與其它行內級元素排列為多行.典型的如段落內容,有文本(可以有多種格式譬如著重),或圖片,都是行內級元素

行內級盒(inline-level boxes)

行內級元素生成行內級盒

參與行內格式化上下文(inline formatting context)

行內級盒分為行內盒和原子行內級盒

行內盒(inline boxes)

參與生成行內格式化上下文的行內級盒稱為行內盒

所有display:inline的非替換元素生成的盒是行內盒

原子行內級盒(atomic inline-level boxes)

不參與生成行內格式化上下文的行內級盒稱為原子行內級盒

這些盒由可替換行內元素,或display值為inline-block或inline-table的元素生成,不能拆分成多個盒

  
  
     span 里的文本 可以
     分成多行因為它是個行內盒。
  



   span 里的文本 不能分成多行
   因為它 是個行內塊盒。

匿名行內盒(Anonymous inline boxes)

類似于塊盒,CSS引擎有時自動生成行內盒.這些盒也是匿名的,因為他們沒有對應的選擇器名字.他們繼承所有可繼承的屬性,非繼承的屬性取initial

匿名行內盒最常見的例子是塊盒直接包含文本,文本將包含在匿名行內盒中.空白如果使用white-space去掉,則不會生成匿名行內盒

行盒(Lines boxes)

行盒由行內格式化上下文(inline formatting context)產生的盒,用于表示一行

在塊盒里面,行盒從塊盒一邊排版到另一邊.當有浮動時,行盒從左浮動的最右邊排版到右浮動的最左邊.

行盒是技術上的實現,開發者通常不用操心它

插入盒(Run-in boxes)

插入盒,由display:run-in定義.由后續盒的類型決定是塊盒還是行盒.可以用來在第一個段落中插入標題

盒的生成

定位模式(Positioning schemes)

CSS 2.1中，一個盒可能根據三種定位模式來布局：

常規流 CSS 2.1中，常規流包括塊級盒的塊格式化（block formatting），行內級盒的行內格式化和塊級與行內級盒的相對定位

浮動在浮動模型中，一個盒先根據常規流布局，然后從流中取出來盡可能地左移或右移。其它內容可能會沿著浮動（盒）的一側排列（Content may flow along the side of a float）

絕對定位 在絕對定位模型中，一個盒會從常規流中全部移除（它不會影響后面的兄弟）并根據包含塊確定位置

如果一個元素是浮動的，絕對定位的或者是根元素，它就叫流外（out of flow）（元素）。如果一個元素不是流外的，就叫流內（in-flow）（元素）。元素A的流是由A和所有最近的流外祖先為A的流內元素組成的集合

css脫離文檔流到底是什么意思，脫離文檔流就不占據空間了嗎？脫離文檔流是不是指該元素從dom樹中脫離？

常規流（Normal flow）

常規流中的盒屬于一個格式化上下文，可能是塊或是行內，但不能都是（既是塊又是行內）。塊級盒參與塊格式化上下文。行內級盒參與行內格式化上下文

塊格式化上下文

行內格式化上下文

相對定位

浮動(float)

float（盒）就是一個在當前行向左或向右移動的盒。float（或者"floated"或者"floating"盒）最有意思的特性是其它內容會沿著它的一側排列（可以通過"clear"屬性禁止這種行為）。其它內容會沿著left-floated盒的右側，right-floated盒的左側排列。

浮動

絕對定位(Absolute positioning)

絕對定位模型中，一個盒會有相對于其包含塊的明確偏移，它會從常規流中全部移除（不會影響后面的兄弟）。一個絕對定位的盒會為常規流中的子級和絕對（不是fixed）定位的后代建立一個新的包含塊。然而一個絕對定位的元素的內容不會沿著任何其它盒排列。它們可能會遮住其它盒的內容（或者它們自身被遮住），取決于重疊盒的堆疊層級（stack levels）

本規范中出現的絕對定位元素（或者它的盒）表示元素的"position"屬性值為"absolute"或者"fixed"

絕對定位

分層展示(Layered presentation) z-index

對于一個定位的盒，z-index屬性指定了：

當前堆疊（stacking context）上下文中，該盒的堆疊層級（stack level）

該盒是否（應該）建立一個堆疊上下文

z-index

GPU云服務器云服務器模型Model format時間格式 FORMATE Formatting

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116548.html

前端進階之什么是BFC？BFC的原理是什么？如何創建BFC？

摘要：官方說法就是它規定了用戶端在媒介中如何處理文檔樹。是的包含塊，同時又是的包含塊，不是絕對的。因此稱為匿名盒子。行內盒子行內級元素會生成行內級盒子，該盒子同時會參與行內格式化上下文的創建。如果只有一個值指定為，則其使用的值來自相等。作者：陳大魚頭 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...

lowett 2019-08-30 15:44 評論0 收藏0
CSS中各種布局的背后(*FC)

摘要：中各種布局的背后，實質上是各種的組合。相反，一些塊容器盒，比如非替換行內塊及非替換表格單元格，不是塊級盒。描述元素跟它的后代之間的影響。行盒行盒由行內格式化上下文產生的盒，用于表示一行。彈性容器外和彈性項目內的一切元素都不受影響。 CSS中各種布局的背后，實質上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。盒模型(Box M...

miracledan 2019-08-30 14:01 評論0 收藏0
【Hello CSS】第二章-CSS的邏輯屬性與盒子模型

摘要：本篇則會分享的邏輯屬性以及盒子模型。的邏輯屬性年月日，的工作組發布了邏輯屬性和值的首份工作草案。那么按著這個規則去修改文本屬性時，就會出現上述這種不符合語法規則的狀態。大概也是基于這個原因，所以發布了新的邏輯屬性與值。因此稱為匿名盒子。作者：陳大魚頭 github： KRISACHAN 在上一篇【Hello CSS】的第一章CSS的語法與工作流中介紹了CSS的語法規則以及基本的...

SegmentFault 2019-08-30 10:49 評論0 收藏0
CSS規范 > 9 視覺格式化模型 Visual Formatting Model

摘要：盒的類型會影響其在視覺格式化模型中的表現。浮動元素絕對定位元素根元素都被稱為脫離文檔流其他元素被稱為文檔流內。視覺格式化模型 Visual Formatting Model URL：http://www.w3.org/TR/CSS2/visuren.html Translator: HaoyCn Date: 14th of Aug, 2015 本文并未全部翻譯，譯者在原文基礎上...

魏憲會 2019-08-28 18:15 評論0 收藏0
想要清晰的明白（一）： CSS視覺格式化模型|盒模型|定位方案|BFC

摘要：并且這種過程遵循標準的描述只要不是和絕對定位方式布局的，都在普通流里面。定位相對定位在普通流之中，是相對于它在普通流中的位置中進行移動，元素占據原來位置絕對定位脫離普通流，不占據空間相對于距離它最近的那個已定位的祖先相對絕對元素決定的。視覺格式化模型頁面(文檔樹)可以想象成是由一個個的Box組合而成的，而視覺格式化模型(Visual formatting model)是一套規則，將...

Edison 2019-08-30 13:00 評論0 收藏0