對于BFC(Block Formatting Context-塊級格式化上下文)和IFC(Inline Formatting Context-行級格式化上下文)之前有一點(diǎn)點(diǎn)的了解，但是沒(méi)有去深入。比如以前每次用vertical-align這個(gè)屬性時(shí)，經(jīng)常是無(wú)法做到垂直居中卻百思不得其解，今天整理了下相關(guān)知識記錄在此。
Box 是 CSS 布局的對象和基本單位， 直觀(guān)點(diǎn)來(lái)說(shuō)，就是一個(gè)頁(yè)面是由很多個(gè) Box 組成的。CSS 框模型描述了為文檔樹(shù)中的元素而生成的矩形框。這些框會(huì )按照視覺(jué)格式化模型來(lái)排列顯示。
框模型(Box model)
每個(gè)框都有一個(gè)內容區域（例如文本、圖像等）及周?chē)蛇x的內邊距、邊框和外邊距區域；每個(gè)區域的大小由以下定義的各屬性指定。下圖展示了這些區域之間的關(guān)系，以及用于描述外邊距、邊框和內邊距片段的相關(guān)術(shù)語(yǔ)。
四個(gè)區域（內容、內邊距、邊框和外邊距）的每一個(gè)邊界被稱(chēng)作一個(gè)“邊緣”，所以每個(gè)框都有四個(gè)邊緣。
一個(gè)框之內容區域的大小，即內容寬度和內容高度，由幾個(gè)因素決定：生成該框的元素是否設置了width或height屬性、框是否包含文本或其他框、框是否是一個(gè)表格等。IE的框模型有點(diǎn)怪異，它把內容，內邊距（padding）和邊框（border）全部包括在一個(gè)指定的寬度或高度之內。這導致它呈現出一個(gè)比遵從標準行為的結果更窄或者更短的框模型。
一個(gè)框的內容、內邊距和邊框區域的背景樣式由生成它的元素的?background?屬性來(lái)指定。外邊框的背景總是透明的。
margin-top和margin-bottom在非替代行內元素上不起作用。margin可為負值，padding不行。
折疊外邊距(Collapsing margins)
在 CSS 中，兩個(gè)以上的框（可能是兄弟，也可能不是）之間的相鄰外邊距可以被合并成一個(gè)單獨的外邊距。通過(guò)此方式合并的外邊距被稱(chēng)為折疊，且產(chǎn)生的已合并的外邊距被稱(chēng)為折疊外邊距。水平外邊距不會(huì )合并。除了：
- 根元素的框的外邊距不合并。
- 如果一個(gè)有
間隙的元素的上、下外邊距相鄰，則其外邊距將與下面的兄弟的外邊距合并，但產(chǎn)生的邊距不會(huì )與父親區塊的下外邊距合并。
當且僅當下列情況發(fā)生，則稱(chēng)兩個(gè)外邊距相鄰：
- 雙方都是同一個(gè)塊格式化上下文中的浮動(dòng)塊級框。
- 沒(méi)有行框、沒(méi)有間隙、沒(méi)有內邊距且沒(méi)有邊框隔開(kāi)它們（注意，某些零高度行框會(huì )為此被忽略。）
- 雙方的框邊緣垂直相鄰，例如下列一種形式：
- 框的上外邊距和其屬于正常排版(normal flow)的第一個(gè)孩子的上外邊距。
- 框的下外邊距和其屬于正常排版的下一個(gè)兄弟的上外邊距。
- 屬于正常排版的最后一個(gè)孩子的下外邊距和其父親的下外邊距，如果其父親的高度計算值為?auto?。
- 框的上、下外邊距，如果該框沒(méi)有建立新的區塊格式上下文，且?min-height?計算值為零、?height?計算值為零或?auto?、且沒(méi)有屬于正常排版的孩子。
上述規則意味著(zhù)：
- 在浮動(dòng)框和其他框之間的外邊距不會(huì )折疊（甚至一個(gè)浮動(dòng)框和其屬于正常排版的孩子之間也不會(huì )出現外邊距折疊）。
- 創(chuàng )建了新塊格式化上下文的元素（例如浮動(dòng)的以及overflow不是visible的元素），不會(huì )與其屬于正常排版的孩子出現外邊距折疊。
- 絕對定位框的外邊距不會(huì )折疊（和其屬于正常排版的孩子也不折疊）。
- 行內塊框的外邊距不會(huì )折疊（和其屬于正常排版的孩子也不折疊）。
- 屬于正常排版的一個(gè)塊級元素其下外邊距總是與其屬于正常排版的下一個(gè)塊級兄弟的上外邊距折疊，除非這兩兄弟之間有間隙。
- 如果屬于正常排版的一個(gè)塊元素沒(méi)有上邊框、上內邊距，且其第一個(gè)浮動(dòng)的塊級孩子沒(méi)有間隙，則該元素的上外邊距會(huì )與其屬于正常排版的第一個(gè)塊級孩子的上外邊距折疊。
- 如果一個(gè)height為auto且min-height為零的浮動(dòng)的塊框沒(méi)有下內邊距和下邊框，且其屬于正常排版的最后一個(gè)塊級孩子沒(méi)有與任何其它帶間隙的上外邊距出現折疊，則該框的下外邊距會(huì )與該孩子的下外邊距折疊。
- 如果一個(gè)框的min-height屬性為零，且沒(méi)有上或下邊框以及上或下內邊距，且height為 0 或者auto，且不包含行框，且其屬于正常排版的所有孩子的外邊距都折疊了，則折疊其外邊距。
包含塊containing block
containing block（包含塊）：是視覺(jué)格式化模型的一個(gè)重要概念，它與框模型類(lèi)似，也可以理解為一個(gè)矩形，而這個(gè)矩形的作用是為它里面包含的元素提供一個(gè)參考，元素的尺寸和位置往往是由該元素所在的包含塊決定的。也就是說(shuō)一個(gè)元素盒子的位置和大小有時(shí)是通過(guò)相對于一個(gè)特定的長(cháng)方形來(lái)計算的，這個(gè)長(cháng)方形就被稱(chēng)之為元素的 containing block?！翱虻陌瑝K”表示“框所處的包含塊”，而不是其產(chǎn)生的包含塊。每個(gè)框會(huì )被給予一個(gè)相對于其包含塊的位置，但它不會(huì )被局限在其包含塊內；它有可能會(huì )溢出。
為什么定位了的元素還總是以瀏覽器窗口的左上角為坐標呢？ 因為并不是每個(gè)元素都能為其后輩元素生成一個(gè)包含塊。
建立包含塊的規則如下：
根元素”的包含塊（也叫初始包含塊）由user-agent生成，在HTML中，根元素是HTML元素，盡管有的瀏覽器會(huì )不正確地使用body元素。
如果元素的位置是’relative’ 或者 ‘static’,元素的包含塊設置為最近的塊級祖先元素的Content edge。
如果元素設置了’position: fixed’，包含塊由viewport創(chuàng )建
對那些使用絕對（absolute）作為定位（postition）的非根元素，包含塊設為最近的定位（postition）不是靜止（static）的祖先元素（任何類(lèi)型）。有以下幾種情況：
a.如果祖先元素是塊級（block）元素，包含塊設為祖先元素的Padding edge。
b.如果祖先元素是內聯(lián)（inline）元素，包含塊設為祖先元素的Content edge。
如果沒(méi)有祖先元素,包含塊是根元素盒子的內容邊界確定。
因此，絕對定位的元素往往以瀏覽器可視區域的左上為坐標原點(diǎn)來(lái)進(jìn)行定位了。
塊級元素、塊容器框和塊框 Block-level elements 、block container box and block boxes
塊級元素是源文件中會(huì )被格式化成塊狀（例：段落）的元素。 ‘display’屬性的以下取值會(huì )讓一個(gè)元素成為塊級元素： ‘block’、’list-item’、’table’。每個(gè)塊級元素生成一個(gè)主要的塊級框來(lái)包含其子框和生成的內容，同時(shí)任何定位方案都會(huì )與這個(gè)主要的框有關(guān)。塊級框是參與塊格式化上下文BFC的框。
除了 table框，和可替換元素，一個(gè)塊級框同時(shí)也是一個(gè)塊容器框，一個(gè)塊容器框要么只包含塊級框，要么創(chuàng )建一個(gè)行格式化上下文而只包含行級框。并非所有的塊容器框都是塊級框：不可替換的inline -block和不可替換的 table-cell 也是塊容器但不是塊級框。是塊級框的塊容器稱(chēng)作塊框。
匿名塊框
有這樣一個(gè)文檔：
<DIV>Some text<P>More text</DIV>(并假定 DIV 和 P 都設置了’display: block’),DIV 似乎同時(shí)包含了行內類(lèi)型的內容和塊類(lèi)型的內容。為了使格式化簡(jiǎn)單一些，我們假定有一個(gè)匿名塊框圍繞在”Some text”周?chē)?br>
當一個(gè)行內框(inline box)包含一個(gè)屬于normal flow的塊級框，這個(gè)行內框（及與其位于同一行框(line box)的行內祖先）會(huì )被從周?chē)膲K級框（及其連續的塊級兄弟 ）中分離出來(lái)，把行內框分離成兩個(gè)框，它在塊級框兩邊。在打斷之前和打斷之后的行框都附入匿名塊框，并且該塊級框與匿名塊框成為兄弟。當這樣的行內框受到相對定位影響，任何產(chǎn)生的移動(dòng)同樣影響到包含在行內框內的塊級框。
該模型將應用在下面的例子中:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><HEAD><TITLE>Anonymous text interrupted by a block</TITLE><STYLE>p { display: inline }span { display: block } </STYLE></HEAD><BODY><P>This is anonymous text before the SPAN。<SPAN>This is the content of SPAN.</SPAN>This is anonymous text after the SPAN。</P></BODY><!--p 元素包含一段匿名文本(C1)，隨后是一個(gè)塊級元素，再隨后是另一段匿名文本(C2)。對此生成了一個(gè)代表 BODY 的塊框，它包含了圍繞 C1 一個(gè)匿名塊框、代表 SPAN 的塊框，和圍繞 C2 的另一個(gè)匿名塊框。-->
行級元素、行內框和行級框 Inline-level elements 、 inline boxes and inline-level boxes
行級元素是在源文檔中那些不為其內容不形成新的塊;而讓其內容分布在多行中的元素(如，段落內著(zhù)重的文本，行內圖形等等)。以下的’display’屬性值產(chǎn)生一個(gè)行級元素:’inline’, ‘inline-table’, and ‘inline-block’。行級元素生成行級框，而這些框會(huì )參與某個(gè)行格式化上下文。
一個(gè)行內框是行級框，且其內容參與了包含它的行格式化上下文。一個(gè)’display’值是’inline’的非替換元素會(huì )生成一個(gè)行內框。那些不是行內框的行級框(例如可替換的行級元素、inline-block元素和 inline-table元素)被稱(chēng)為原子行級框，因為它們是以單一不透明框的形式來(lái)參與其行格式化上下文。
匿名行內框
任何直接被包含在一個(gè)塊容器元素（而不是行內元素）中的文本必須視為匿名行內元素。
在如下的文檔中:
<P>Some <EM>emphasized</em> text</P>P 元素生成一個(gè)塊框，其內還有幾個(gè)行內框?！眅mphasized”的框是由行內元素(EM)產(chǎn)生的一個(gè)行內框，而其它的框(“Some”和”text”)是塊類(lèi)元素(P)產(chǎn)生的行內框。后者就稱(chēng)為匿名行內框，因為它們沒(méi)有與之相關(guān)的行級元素。
這樣的行內框從其父塊框那里繼承可以繼承的屬性。非繼承屬性取其初始值。例子中，匿名行內框的顏色繼承自 P，而背景是透明的?？崭駜热?，如果可被折疊（根據’white-space’屬性），則其不會(huì )生成任何匿名行內框。
inline-block這個(gè)值讓元素產(chǎn)生一個(gè)行級塊容器。行內塊（inline-block）的內部會(huì )被當作塊容器來(lái)格式化，而此元素本身會(huì )被當作原子行級框來(lái)格式化。
定位方案 Positioning schemes
正常排版normal flow。正常排版包括對塊級框的塊格式化bfc，對行級框的行格式化ifc，對塊級框和行級框的相對定位。
浮動(dòng)。在浮動(dòng)模型中，一個(gè)框先按照正常排版來(lái)擺放，再將它從排版流中取出并盡可能地向左或向右偏移。其它內容可以排在一個(gè)浮動(dòng)的周?chē)?/p>
絕對定位。在絕對定位模型中，一個(gè)框會(huì )從排版流中完全脫離出來(lái)（它對后續的兄弟沒(méi)有影響），并相對其包含塊來(lái)指定其位置。
一個(gè)元素如果它是浮動(dòng)、絕對定位或根元素，則被稱(chēng)為排版流之外out of flow的元素。
user-agent可將根元素上的position視為static正常排版normal flow。
‘display’、 ‘position’ 與 ‘float’ 的關(guān)系
影響框的生成和布局的三個(gè)屬性——’display’，’position’和’float’——間的相互關(guān)系如下:
- 如果’display’值為’none’，那么’position’和’float’無(wú)效，元素不生成框。
- 否則，如果’position’值為’absolute’或者’fixed’，框絕對地定位’float’計算的值為’none’，并且 display 根據下面的表格進(jìn)行設定?？虻奈恢糜伞痶op’, ‘right’,’bottom’和’left’屬性和包含塊決定。
- 否則，如果’float’的值不是’none’，該框是浮動(dòng)的，且’display’值根據下面的表格進(jìn)行設定。
- 否則，如果元素是根元素，’display’值根據下面的表格進(jìn)行設定，除了其在 CSS2.1 里面沒(méi)有定義是否指定值’list-item’對應計算值’block’或者’list-item’。
- 否則，’display’ 的計算值為指定的值。
| 指定值 | 計算值 |
|---|---|
| inline-table | table |
| inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block | block |
| 其他 | 與指定值相同 |
框在正常排版noraml flow中必然屬于一個(gè)格式化上下文，要么是塊格式化上下文，要么是行格式化上下文。塊級框參與塊格式化上下文。行級框參與行格式化上下文。
Formatting context 是 W3C CSS2.1 規范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。最常見(jiàn)的 Formatting context 有 Block fomatting context (簡(jiǎn)稱(chēng)BFC)和 Inline formatting context (簡(jiǎn)稱(chēng)IFC)。
BFC(Block formatting context)直譯為”塊級格式化上下文”。它是一個(gè)獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，并且與這個(gè)區域外部毫不相干。
BFC布局規則：
- 內部的Box會(huì )在垂直方向，一個(gè)接一個(gè)地放置。
- Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì )發(fā)生重疊
- 每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
- BFC的區域不會(huì )與float box重疊，常用來(lái)清除浮動(dòng)和布局。
- BFC就是頁(yè)面上的一個(gè)隔離的獨立容器，容器里面的子元素不會(huì )影響到外面的元素。反之也如此。
- 計算BFC的高度時(shí)，浮動(dòng)元素也參與計算
哪些元素會(huì )生成BFC：
- 根元素
- float屬性不為none 浮動(dòng)框
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex 非塊框的塊容器
- overflow不為visible的塊框。這就是為什么我們經(jīng)常用overflow:hidden去清除內部浮動(dòng)的原因
- 觸發(fā)IE的hasLayout特性
IFC布局規則：
- 框會(huì )從包含塊的頂部開(kāi)始，一個(gè)接一個(gè)地水平擺放。
- 擺放這些框的時(shí)候，它們在水平方向上的外邊距、邊框、內邊距所占用的空間都會(huì )被考慮在內。在垂直方向上，這些框可能會(huì )以不同形式來(lái)對齊：它們可能會(huì )把底部或頂部對齊，也可能把其內部的文本基線(xiàn)對齊。能把在一行上的框都完全包含進(jìn)去的一個(gè)矩形區域，被稱(chēng)為該行的行框。水平的margin、padding、border有效，垂直無(wú)效。不能指定寬高。
- 行框的寬度是由包含塊和存在的浮動(dòng)來(lái)決定。行框的高度由行高計算這一章所描述的規則來(lái)決定。
行框一定會(huì )高到足以容納它所包含的全部框。然而，它也可能比它所包含的最高的框還要高（例如：這些框是以基線(xiàn)對齊）。當框 B 的高度小于包含它的行框時(shí)，則 B 在行框中垂直對齊的位置由’vertical-align’ 屬性來(lái)決定。當幾個(gè)行級框在水平方向上無(wú)法塞得進(jìn)同一個(gè)行框時(shí)，它們會(huì )被分布在兩個(gè)或多個(gè)垂直堆放的行框中。行框會(huì )以既沒(méi)有垂直間距 也沒(méi)有重疊的方式被垂直堆放起來(lái)。
通常，行框的左邊緊貼其包含塊的左邊，而行框的右邊緊貼其包含塊的右邊。然而，浮動(dòng)框可以插在包含塊邊緣與行框邊緣之間。因此，盡管在同一個(gè)IFC中的行框通常有同樣的寬度（也就是其包含塊的寬度），但它們的寬度也可能受浮動(dòng)讓水平可用空間減少的影響而有所改變。在同一個(gè)IFC中，行框的高度通常是變化的（例如：某一行包含了一個(gè)比較高的圖片，而其它行只包含文本）。
當一行上的行級框的總寬度小于包含它們的行框的寬度，則它們在行框內的水平分布由’text-align’屬性來(lái)決定。
當一個(gè)行內框的寬度超過(guò)了行框的寬度，則它會(huì )被分割成幾個(gè)框，而這些框會(huì )分布在幾個(gè)行框。如果此行內框不可分割（例如：?jiǎn)蝹€(gè)字符、或語(yǔ)言指定的文字打斷規則不允許在此行內框中出現打斷、或該行內框受 white-space 屬性為 nowrap或 pre 的影響），那么該行內框溢出該行框。
行內框被分割的時(shí)候，外邊距、邊框和內邊距在出現分割的地方都沒(méi)有視覺(jué)效果。
以下段落(由塊級元素 P 創(chuàng )建)包含由元素 EM 和 STRONG 間隔的匿名文本:
<P>Several <EM>emphasized words</EM> appear<STRONG>in this</STRONG> sentence, dear.</P>P 元素產(chǎn)生一個(gè)塊框，它包含了五個(gè)行內框，其中的三個(gè)是匿名的：
為了格式化這一段，用戶(hù)代理將這五個(gè)框排入行框內。本例中，為 P 元素生成的框生成了行內框的包含塊。如果該包含塊足夠寬，則這所有的行內框將放在一個(gè)行框內：
行高計算 ― ‘line-height’ 與 ‘vertical-align’ 屬性
user-agent將行內級框流入垂直堆疊的行框內。行框的高度由下面步驟決定：
- 計算行框里的各行內級框的高度。對于置換元素、行內塊元素、行內表格元素來(lái)說(shuō)，這是邊界框的高度，對于行內框來(lái)說(shuō)，這是其 ‘line-height’。
- 行內級元素根據其 ‘vertical-align’ 屬性垂直對齊。在這些框使用 ‘top’ 或 ‘bottom’ 對齊的情況下，user-agent必須以最小化行框的高為目標對齊這些框。若這些框夠高，則存在多個(gè)解而 CSS 2.1 不定義行框基線(xiàn)的位置。
- 行框的高是最頂端框的頂邊到最底端框的底邊的距離。
在內容由行內級元素組成的塊容器元素上，’line-height’ 可以用來(lái)指定元素里行框的“最小”高度。最小高度由基線(xiàn)之上的最小高度與基線(xiàn)之下的最小深度組成，就如同每一個(gè)行框由一個(gè)零寬，具有原來(lái)元素的字體與行高屬性的行內框開(kāi)始。
來(lái)個(gè)轉載過(guò)來(lái)的應用，不定高度圖片垂直居中：
<div style="border: 1px solid #CCC; height: 200px;"> <span style="width: 1px; display: inline-block; margin-right: -1px; height: 100%; vertical-align: middle;"></span> <img src="http://images.cnblogs.com/cnblogs_com/onlysea/304895/r_474.jpg" width="100" style="vertical-align: middle;" /></div>一個(gè)無(wú)語(yǔ)義的span，用于使line box高度與div一樣。計算line box的baseline,這里參與計算的只有strut box這個(gè)臆想的box，算出baseline，用span的垂直中心對齊，這時(shí)span就會(huì )像上移動(dòng)，而span又是支撐這個(gè)line box高度的，等于line box往上移，用line box的中心對齊line box 的baseline，這樣line box的垂直中線(xiàn)就是baseline。img 的middle就按這個(gè)baseline 做為基礎來(lái)對齊。所以就居中了。
參考文獻以及相關(guān)網(wǎng)址：
聯(lián)系客服
