IFC

定義

• 行內元素

              首先，IFC與行內元素密不可分，行內元素指的是strong或span之類的元素。這些元素不會在以前或以後生成「行分隔符」，他們是塊級元素的後代。經過聲明display：inline/inline-block/inlin-table，可讓元素成爲inline-level element。

• IFC

              IFC：行內格式化上下文，應用了IFC的行內元素的盒子不會在以前或以後生成「行分隔符」，他們是塊級元素的後代。

•  觸發IFC：display：inline。

盒子分類

盒子的類型會在必定程度上影響盒子的視覺格式化模型，因此，要對CSS中各類盒子的類型區分清楚。

須要注意的是：block container box指的是僅包含block-level boxes或者僅包含inline-level boxes的box。其中，僅包含block-level boxes的block container box是block box，其他的block container box爲inline-block box。

line-box與inline-box

行內格式化上下文涉及到兩種盒子(boxes)：行框(line box)以及行內框(inline box)。

• inline box：inline-level元素（display: 'inline', 'inline-table', and 'inline-block'）會產生inline-level boxes，這些box參與了IFC，則這個box就是inline box。
• line box：inline-level box水平排列，瀏覽器的一整行生成一個行框(line box)，因此一個行框(line box)可能包含多個行內框(inline-level box)。

line box與inline box的高度

•  line box：行框的上邊界要位於最高行內框的上界，而行框的底邊要放在最低行內框的下邊界
  

           line box的高度由block-progression與其子inline-level boxes的對齊方式決定，具體的計算方式以下：

line box 必須包含全部子代inline boxes
line box 必須包含替換inline-level 元素的margin部分
line box 必須包含inline block元素的margin部分

•  inline box：盒子的高度等於元素的line-height值
  
  

line-height高度計算

替換元素與非替換元素

• 替換元素：元素內容的部分並不是由文檔內容直接表示。eg: img、input
• 非替換元素：元素內容由瀏覽器在元素自己生成的框中顯示。eg：段落，標題，單元格

line-height高度計算

•  非替換元素：行間距 =（line-height - 內容區高度)/ 2
•  替換元素：line-height = 內容區高度，無行間距
  

一行中inline boxes的數目由vertical-align的值決定。

行內非替換元素的content box沒法經過設置height與width來設置。content box的高度僅能經過屬性font-size來設置；content box的寬度則自適應其內容而沒法經過屬性width設置，而是等於其子行級盒子的外寬度(margin+border+padding+content width)之和。

替換元素，元素行內框的高度則剛好等於內容區的高度，由於行間距不該用到替換元素，而且邊框和外邊距會影響該元素行內框的高度，相應的可能影響包含該元素的行框的高度。

IFC渲染規則 

每一個元素都相對於其包含塊擺放；能夠這麼說，包含塊就是一個元素的「佈局上下文」，包含塊由最近的塊級祖先元素、表單元格或行內塊祖先元素的內容邊界（content edge）構成。可是沒必要擔憂行內元素，由於他們的擺放方試並不直接依賴於包含塊。

水平方向上：各inline-level box從包含塊的頂部在自左到右水平排列，line box的左邊緣挨着它的包含塊的左邊緣，右邊緣挨着它的包含塊的右邊緣。然而，浮動盒子也許會在包含塊邊緣和line box邊緣之間。所以，儘管line boxs在一樣的行內格式上下文中一般都有相同的寬度(就是他的包含塊的寬度)，可是水平方向上的空間由於浮動被減小了，它的寬度也會變得複雜。

豎直方向上：各inline-level box根據vertical-align屬性值相對各自的父容器做垂直方向對齊;

水平與垂直對齊屬性

vertical-align:該屬性定義行內元素的基線（指的是行內框的基線，而不是contentarea）相對於該元素所在行的基線、頂、底等(vertical-align: baseline、top、bottom)的垂直對齊。只能應用於inline水平和’table-cell’元素，它僅做用於自身，對裏面的子元素設置vertical-cell屬性是不起做用的。baseline爲默認：元素放置在父元素的基線上。

text-align:該屬性規定元素中的文本的水平對齊方式。

參考

http://meyerweb.com/eric/css/inline-format.html