CSS——可視化格式模型

lijy91 發布于2019-08-02 10:27 / 1940人閱讀

摘要：控制框塊級元素和塊框以及行內元素和行框相關的概念。規則在行內格式化上下文中，框一個接一個地水平排列，起點是包含塊的頂部。

CSS的可視化格式模型

CSS中規定每一個元素都有自己的盒子模型（相當一規定了這個元素如何顯示）；

然后可視化格式模型則是把這些盒子模型按照規則擺放到頁面上，也就是如何布局；

換句話說，盒子模型規定了怎么在頁面上擺放盒子，盒子的相互作用等等；

CSS的可視化格式模型就是規定了瀏覽器在頁面中如何處理文檔樹

1、關鍵字：

包含塊（Containing Block）、

控制框（Controlling Box）、

BFC(Block Formatting Context)、

IFC(Inline Formatting Context)、

定位體系、

浮動等

2、CSS三種定位機制：普通流、浮動流、絕對定位 3、包含塊

一個元素的box的定位和尺寸，會與某一矩形框有關，這個框就稱之為包含塊。

元素h會為它的子孫元素創建包含塊，但是，并不是說元素的包含塊就是它的父元素，元素的包含塊與它的祖先元素的樣式有關：

譬如：

根元素是最頂端的元素，他沒有父節點，它的包含塊就是初始化包含塊；

static和relative的包含塊由他最近的塊級、單元格或者行內塊祖先元素的內容框（content）創建；

fixed的包含塊就是當前可視窗口；

absolute的包含塊由他最近的position屬性值不為static的祖先元素創建：

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

如果祖先元素不是行內元素，那么包含塊的區域應該是祖先元素的內邊距邊界。

4、控制框(Controlling Box)

塊級元素和塊框以及行內元素和行框相關的概念。

塊框

塊級元素會生成一個塊框（Block Box），塊框會占據一整行，用來包含子box和生成的內容；

塊框同時也是一個塊包含框（Containing Box），里面要么只包含塊框，要么只包含行內框（不能混雜）；

如果塊框內部有塊級元素也有行內元素，那么行內元素會被匿名塊框包圍

匿名塊框的生成：

        
            some inline text
            more text

div生成了一個塊框，包含了另一個塊框p以及文本內容some inline text，此時文本內容會被強制加到一個匿名的塊框里面，被div生成的塊框包含；

換句話說：如果一個塊框在其中包含另一個塊框，那么我們強迫它只能包含塊框，因此其他文本內容生成出來的都是匿名塊框（而不是匿名行內框）。

行內框

一個行內元素生成一個行內框；

行內元素能排在一行，允許左右有其他元素。

匿名行內框的生成：

        
            some  
            more text
            text

div元素生成一個塊框，其中有幾個行內框（如em）以及文本some和text，此時會專門為這些文本生成匿名行內框；

display屬性的影響

display的幾個屬性也可以影響不同框的生成：

block，元素生成一個塊框；

inline，元素產生一個或多個的行內框；

inline-block，元素產生一個行內級塊框，行內塊框的內部會被當做塊框來格式化，而此元素本身會被當作行內級框來格式化（這也是為什么會產生BFC）；

none，不生成框，不再格式化結構中，而另一個visibility：hidden則會產生一個不可見的框

總結：

如果一個框里，有一個塊級元素，那么這個框里的內容都會被當作塊框來進行格式化，因為只要出現了塊級元素，就會將里面的內容分成幾塊，每一塊獨占一行（出現行內可以用匿名塊框解決）；

如果一個框里，沒有任何塊級元素，那么這個框里的內容會被當成行內框來格式化，因為里面的內容時按照順序成行的排列。

FC（Formatting Context）

FC即格式化上下文，它定義框內部的元素渲染規則，比較抽象，譬如：

FC就像是一個大箱子，里面裝有很多元素；

箱子可以隔開里面的元素和外面的元素（所以外部并不會影響FC內部的渲染）；

內部的規則可以是：如何定位、寬高計算、margin折疊等等

不同類型的框參與的FC類型不同，譬如塊級框對應BFC，行內框對應IFC

注意：并不是說所有的框都會產生FC，而是符合特定的條件才會產生，只有產生了對應的FC后才會應用對應的FC渲染規則

BFC渲染規則

在塊格式化上下文中，每一個元素左外邊與包含塊的左邊解除（對于從右到左的格式化，右外邊接觸右邊），即使存在浮動也是如此（所以浮動元素正常會直接貼近它的包含塊的左邊，與普通元素重合），除非這個元素也創建了一個新的BFC；

BFC特點：

內部box在垂直方向，一個接一個的放置；

box的垂直方向由margin決定，屬于同一個BFC的兩個box間的margin會重疊；

BFC區域不會與float box重疊（可用于排版）

BFC就是頁面上的一個隔離的獨立容器，容器里的子元素不會影響到外面的元素，反之也是如此；

計算BFC的高度時，浮動元素也參與計算（不會浮動塌陷如overflow：hidden清除浮動就是這個原理）；

如何觸發BFC

根元素；

float屬性不為none；

position為absolute或fixed；

display為inline-block、flex、inline-flex、table、table-cell、table-caption

overflow不為visible

display：table，本身不會產生BFC，但是他會產生匿名框（包含display：table-cell的框），而這個匿名框產生BFC。

IFC規則

在行內格式化上下文中，框一個接一個地水平排列，起點是包含塊的頂部。水平方向上的margin，border和padding在框之間得到保留，框在垂直方向上可以以不同的方式對齊；

它們的頂部或底部對齊，或根據其中文字的基線對齊

行框：

包含那些框的長方形區域，會形成一行，叫做行框。行框的寬度有它的包含塊和其中的浮動元素決定，高度的確定由行高度計算規則決定；

行框的規則：

如果幾個行內框在水平方向上無法放入一個行框內，它們可以分配在兩個或多個垂直堆疊的行框中（即行內框的分割）

行框在堆疊是沒有垂直方向上的分割且永遠不重疊；

行框的高度總是足夠容納所包含的所有框，不過他可能高于他包含的最高的框（例如，框對齊會引起基線對齊）

行框的左邊接觸到其包含塊的左邊，右邊接觸到其包含塊的右邊。

總結：

1. 行內元素總是會應用IFC渲染規則；
2. 行內元素會應用IFC規則渲染，譬如text-align可以用來居中等；
3. 塊框內部對于文本這類的匿名元素，會產生匿名行框包圍，而行框內部就應用IFC渲染規則
4. 行內框內部，對于那些行內元素，一樣應用IFC渲染規則；
5. 另外，inline-block，會在元素外層產生IFC（所以這個元素可以通過text-align水平居中），當然，它的內部則按照BFC規則渲染

云服務器 GPU云服務器可視化模型 css格式格式化css文件 css js數據可視化展示

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

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

CSS——可視化格式模型

摘要：控制框塊級元素和塊框以及行內元素和行框相關的概念。規則在行內格式化上下文中，框一個接一個地水平排列，起點是包含塊的頂部。 CSS的可視化格式模型 CSS中規定每一個元素都有自己的盒子模型（相當一規定了這個元素如何顯示）；然后可視化格式模型則是把這些盒子模型按照規則擺放到頁面上，也就是如何布局；換句話說，盒子模型規定了怎么在頁面上擺放盒子，盒子的相互作用等等； CSS的可視化格式模...

nodejh 2019-08-22 17:18 評論0 收藏0
CSS——可視化格式模型

摘要：控制框塊級元素和塊框以及行內元素和行框相關的概念。規則在行內格式化上下文中，框一個接一個地水平排列，起點是包含塊的頂部。 CSS的可視化格式模型 CSS中規定每一個元素都有自己的盒子模型（相當一規定了這個元素如何顯示）；然后可視化格式模型則是把這些盒子模型按照規則擺放到頁面上，也就是如何布局；換句話說，盒子模型規定了怎么在頁面上擺放盒子，盒子的相互作用等等； CSS的可視化格式模...

Lin_YT 2019-08-29 15:24 評論0 收藏0
十分鐘復習CSS盒模型與BFC

摘要：盒模型與本文為收集整理總結網上資源旨在系統復習盒模型與節省復習時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內容區盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區別標準盒模型的寬高則為內容區域的寬高盒模型 css盒模型與BFC 本文為收集整理總結網上資源旨在系統復習css盒模型與bfc 節省復習時間閱讀10分鐘什么是盒模型每一個文檔中，每...

verano 2019-08-02 10:48 評論0 收藏0
十分鐘復習CSS盒模型與BFC

摘要：盒模型與本文為收集整理總結網上資源旨在系統復習盒模型與節省復習時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內容區盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區別標準盒模型的寬高則為內容區域的寬高盒模型 css盒模型與BFC 本文為收集整理總結網上資源旨在系統復習css盒模型與bfc 節省復習時間閱讀10分鐘什么是盒模型每一個文檔中，每...

suxier 2019-08-30 15:53 評論0 收藏0