CSS規範之BFC & IFC

元素是文檔結構的基礎，在CSS中，每一個元素生成了一個包含了元素內容的框（box，也譯爲「盒子」）。可是不一樣的元素顯示的方式會有所不一樣，例如<div>和<span>就不一樣，而<strong>和<p>也不同。在文檔類型定義（DTD）中對不一樣的元素規定了不一樣的類型，這也是DTD對文檔之因此重要的緣由之一。

 

1. 替換和不可替換元素

從元素自己的特色來說，能夠分爲替換和不可替換元素。

a) 替換元素

替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。

例如瀏覽器會根據<img>標籤的src屬性的值來讀取圖片信息並顯示出來，而若是查看(X)HTML代碼，則看不到圖片的實際內容；又例如根據<input>標籤的type屬性來決定是顯示輸入框，仍是單選按鈕等。

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替換元素。這些元素每每沒有實際的內容，便是一個空元素，例如：

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

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

b) 不可替換元素

(X)HTML的大多數元素是不可替換元素，即其內容直接表現給用戶端（例如瀏覽器）。例如：

<p>段落的內容</p>

段落<p>是一個不可替換元素，文字「段落的內容」全被顯示

2. 顯示元素

除了可替換元素和不可替換元素的分類方式外，CSS2.1中元素還有另外的分類方式：塊級元素（block-level）和行內元素（inline-level，也譯做「內聯」元素）。

a) 塊級元素

在視覺上被格式化爲塊的元素，最明顯的特徵就是它默認在橫向充滿其父元素的內容區域，並且在其左右兩邊沒有其餘元素，即塊級元素默認是獨佔一行的。

典型的塊級元素有：<div>、<p>、<h1>到<h6>，等等。

經過CSS設定了浮動（float屬性，可向左浮動或向右浮動）以及設定顯示（display）屬性爲「block」或「list-item」的元素都是塊級元素。

可是浮動元素比較特殊，因爲浮動，其旁邊可能會有其餘元素的存在。而「list-item」（列表項<li>），會在其前面生成圓點符號，或者數字序號。

b) 行內元素

行內元素不造成新內容塊，即在其左右能夠有其餘元素，例如<a>、<span>、<strong>等，都是典型的行內級元素。

display屬性等於「inline」的元素都是行內元素。幾乎全部的可替換元素都是行內元素，例如<img>、<input>等等。

不過元素的類型也不是固定的，經過設定CSS的display屬性，可使行內元素變爲塊級元素，也可讓塊級元素變爲行內元素。

 

術語普及

盒： 每一個元素都會生成一個盒，用來容納後代（生成的盒）。因此咱們能夠把一個頁面看作是由一個個的盒子堆砌而成的，只是這些盒子也分種類.

塊級元素： display 爲 block/table/list-item 的元素。

塊級盒： 塊級元素生成的盒

內聯級元素： display 爲 inline/inline-block/inline-table 的元素

內聯級盒： 內聯級元素生成的盒。可是隻有 inline 元素生成的盒才叫作內聯盒，它區別於 inline-block 元素的內聯級塊盒。

行盒： 內聯格式化上下文中，包含來自同一行的盒的矩形區域叫作行盒

匿名塊盒

 

FC

FC（Formating Context，格式化上下文） 是一個佈局的環境，它裏面的盒子須要遵循FC這套體系的規則， CSS2.1 中定義了 BFC（Block Formating Context，塊級格式化上下文） 和 IFC（Inline Formating Context，內聯格式化上下文）， BFC 講的是塊級盒子的佈局規則， IFC 講的是內聯級盒子的佈局規則。

BFC

 

1. 浮動，絕對定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和’overflow’不爲’visible’的塊盒會爲它們的內容創建一個新的塊格式化上下文。（觸發BFC）

2. 在一個塊格式化上下文中，從包含塊的頂部開始，盒在豎直方向一個接一個地放置。兩個兄弟盒之間的豎直距離由’margin’屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的豎直margin會合並。

3. 在計算生成了 BFC 的元素的高度時，其浮動子元素應該參與計算。（觸發bfc 解決父容器高度坍陷的問題）

 IFC

IFC中的行盒的寬度是包含塊的寬度減去 float 元素（若是有的話）的寬度，行盒高度是最高的盒的top與最低的盒的bottom之間的距離。

內聯盒的高度是由line-height決定的，而可替換元素，inline-block，inline-table 元素的高度則是由它們的 margin 盒高度決定的。

 

對‘display’，‘position’和‘float’之間關係的定義 

1.同時設置’absolute’或者’fixed’、非 ‘none’ 的 float，float 會被覆蓋爲 ‘none’。

2.若是'display'設置爲'none'，用戶端必須忽略掉'position'和'float'。在這種狀況下，元素不產生框。 

3.即若是'position'設置爲'absolute'或'fixed'且‘float’的值不爲‘none’，display的值就會被設置爲‘block’，因此設置display: inline; float: left;等同於float:left，display:inline 的屬性並未生效。由於用戶端會忽略掉對’display‘的設置。float:left和display:inline-block固然是不等同的。 

position:absolute和float會隱式的改變display類型， 不論以前是什麼類型的元素（display:none除外），只要設置了position:absolute或float，都會讓元素以display:inline-block的方式顯示，能夠設置長寬，默認寬度並不佔滿父元素，就算是顯示的設置display:inline或display:block，仍然無效。 float在IE6下的雙倍邊距bug就是利用添加display:inline來解決的 注意一點的是，position:relative並不可以隱式的改變display的類型