想要清晰的明白（一）： CSS視覺格式化模型|盒模型|定位方案|BFC

時間 2019-11-10

標籤想要清晰明白 css 視覺格式化模型定位方案 bfc 欄目 CSS 简体版

原文原文鏈接

視覺格式化模型

頁面(文檔樹)能夠想象成是由一個個的Box組合而成的，而視覺格式化模型(Visual formatting model)是一套規則，將這些框佈局成訪問者看到的樣子。css

哪些因素控制了這些佈局

1. 盒的尺寸和類型
    2. 定位體系 Positioning Scheme （常規流，浮動和絕對定位）
    3. 文檔樹中元素之間的關係
    4. 外部信息（如：視口大小，圖片的固有尺寸等）

下文講針對性的解釋這些影響佈局的因素，先來解釋些概念~html

元素框

css假設每一個元素都會生成一個或者多個Box，稱爲元素框，元素框中心有內容區，內容區外周圍包括了padding，border，margin，盒模型就是用來處理這些內容的一個模型css3

包含塊

每一個元素都是相對於包含塊擺放，包含塊就是一個元素的「佈局上下文」,segmentfault

<body>
    <div><p>p的包含塊是div</p><div>
    //div的包含塊是body
</body>

替換/非替換元素

替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。
經過 CSS content 屬性來插入的對象被稱做匿名可替換元素
若是元素的內容包含在文檔之中，則爲非替換元素
非替換元素的全部規則一樣適用於替換元素，只有一個例外，width若是是auto,元素的高寬就是內容的固有高寬，好比img就是圖片的原始大瀏覽器

例如瀏覽器會根據<img>標籤的src屬性的值來讀取圖片信息並顯示出來，查看HTML代碼，則看不到圖片的實際內容；<input>標籤的type屬性來決定是顯示輸入框，仍是單選按鈕等。HTML中的<img>、<input>、<textarea>、<select>、<object>都是替換元素。
這些元素每每沒有實際的內容，便是一個空元素,例如：ide

<img src=」cat.jpg」 />
<input type="submit" name="Submit" value="提交" />

瀏覽器會根據元素的標籤類型和屬性來顯示這些元素。可替換元素也在其顯示中生成了框。wordpress

CSS Box(盒模型/框模型)

CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框和外邊距的方式，咱們常見的盒模型大體有兩種，一種是塊級的盒子（Block Box），一種是行級的盒子（Line Box）佈局

詳細盒子的規則見下篇想要清晰的明白（二）CSS 盒模型Block box與Line box，可是咱們至少能夠知道盒子模型，在整個視覺模型中作到的是一個什麼角色，盒子模型是處理盒子自己內部屬性，像好比邊距，邊框的，而視覺格式化模型是來處理這些盒子擺放的flex

Block Box

display ： block 、 list-item 以及 table 會讓一個元素成爲塊級元素。

Line Box

每一行稱爲一條Line Box，它又是由這一行的許多inline-box組成
display：inline會讓一個元素稱爲行內元素

inline-block

將對象呈現爲inline對象，可是對象的內容做爲block對象呈現。以後的內聯對象會被排列在同一行內。好比咱們能夠給一個link（a元素）inline-block屬性值，使其既具備block的寬度高度特性又具備inline的同行特性。ui

Formatting context

每一個元素，或者說每一個Box會根據設置的display值，去選擇渲染它的方式，不一樣的display有不一樣層級：block-level box（塊級）inline-level box(行級)，run-in box(插入型框 css3)，不一樣的層級會參與不一樣的環境（formatting context）去渲染

上文提到的環境就是這個Formatting context（格式化上下文），他是一個有渲染規則的渲染區域，不一樣的層級有不一樣的渲染規則，好比BFC和IFC

BFC

什麼是BFC

塊級格式化上下文，Block formatting context(簡稱BFC)，規定了塊級盒子的渲染布局方式，他在計算盒子高度，margin值計算等地方有區別於其餘環境。

BFC有什麼特色

內部盒子會在垂直方向排列

同一個BFC中的元素可能會發生margin collapse；

BFC就是頁面上的一個隔離的獨立容器，裏外互相不影響

計算BFC的高度時，考慮BFC所包含的全部子元素，連浮動元素也參與計算；

當元素不是BFC的子元素的時候，浮動元素高度不參與BFC計算（既是常見的盒子塌陷問題）

什麼元素會觸發產生一個新的BFC

根元素 <html>

float屬性不爲none

position爲absolute或fixed

display爲inline-block, table-cell, table-caption, flex, inline-flex

overflow不爲visible

再認真理解下這張圖

<style>
html{background-color: #009a61}
.a{
  width: 100%;
  height: 80px;
  background-color: #f3f3f3;
  margin-bottom: 30px;
}
.b{
  width: 100%;
  background-color: #f3f3f3;
  height:40px;
  margin-bottom: 80px;

}
.c{
  float: left;
  width: 80%;
  height: 80px;
  background-color: #333333;
}
.d{
  margin-top: 80px;
  width: 100%;
  background-color: #f3f3f3;
  overflow: hidden;
}
</style>
<body >
    <div class="a"></div>
    <div class="b">
        <div class="c"> </div>
    </div>
  <div class="d">
      <div class="c"></div>
  </div>
</body>

咱們能夠用BFC來幹嗎

清除浮動
阻止邊距摺疊
用於佈局，什麼兩欄自適應高度之類的

BFC兼容性

IE6-7不支持BFC，而是使用私有屬性hasLayout。表現上來看hasLayout和BFC類似，觸發hasLayout條件與BFC類似，另外須要爲元素設置IE特有的CSS屬性zoom:1; zoom用於設置或檢索元素的縮放比例，值爲1即便用元素實際尺寸，使用zoom既能夠觸發hasLayout又不會對元素產生其餘影響，相對來講更加方便

CSS定位方案

css佈局宏觀上來講是受定位方案影響，定位方案包括普通流，浮動，定位

普通流

元素按照其在 HTML 中的位置順序決定排布的過程。而且這種過程遵循標準的描述
只要不是float和絕對定位方式佈局的，都在普通流裏面。

浮動

浮動框不在文檔的普通流中，浮動的流會漂浮在普通的流上面。
浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。

定位

1. 相對定位在普通流之中，是相對於它在普通流中的位置中進行移動，元素佔據原來位置
 2. 絕對定位脫離普通流，不佔據空間相對於距離它最近的那個已定位的祖先(相對/絕對)元素決定的。
 3. 固定定位，相對於瀏覽器窗口定位，脫離普通流，不佔據空間
 
 剩下的下篇見！！！(*￣3￣)╭

參考資料

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。