行內格式化上下文(Inline formatting contexts)

IFC佈局規則:

• 在一個行內格式化上下文中，盒是一個接一個水平放置的，從包含塊的頂部開始

• 這些盒之間的水平margin，border和padding都有效

• 盒可能以不一樣的方式豎直對齊：以它們的底部或者頂部對齊，或者以它們裏面的文本的基線對齊

行盒(line box)

• 包含來自同一行的盒的矩形區域叫作行盒(line box)

• line box的寬度由包含塊和float狀況決定,通常來講,line box的寬度等於包含塊兩邊之間的寬度,然而float能夠插入到包含塊和行盒邊之間,若是有float,那麼line box的寬度會比沒有float時小

• line box的高度由line-height決定,而line box之間的高度各不相同(好比只含文本的line box高度與包含圖片的line box高度之間)

• line box的高度可以容納它包含的全部盒,當盒的高度小於行盒的高度(例如,若是盒是baseline對齊)時,盒的豎直對齊方式由vertical-align屬性決定

• 當一行的行內級盒的總寬度小於它們所在的line box的寬度時，它們在行盒裏的水平分佈由text-align屬性決定。若是該屬性值爲justify，用戶代理可能會拉伸行內盒（不包括inline-table和inline-block盒）裏的空白和字（間距）

line box與float，vertical-align，text-align

行內盒(inline box)

• 一個inline box是一個（特殊的）行內級盒，其內容參與了它的包含行內格式化上下文

• 當一個inline box超出一個line box的寬度時，它會被分紅幾個盒，而且這些盒會跨多line box分佈。若是一個inline-block沒法分割（例如，若是該inline box含有一個單個字符，或者特定語言的單詞分隔規則不容許在該inline box裏分隔，或若是該inline box受到了一個值爲nowrap或者pre的white-space的影響），那麼該inline box會從line box溢出

• 當一個inline box被分割後，margin，border和padding在發生分割的地方（或者在任何分割處，若是有多處的話）不會有可視化效果

• 同一個line box裏的inline box也可能由於雙向（bidirectional）文本處理而被分割成幾個盒

須要盛放（hold）一個行內格式化上下文中的行內級內容時，建立一個line box。不含文本、保留空白符（preserved white space）、margin，padding或者border非0的行內元素、其它流內內容（例如，圖片，inline block或者inline table），而且不以保留換行符（preserved newline）結束的line box必須被看成一個0高度的line box，爲了肯定它裏面全部元素的位置，而其它時候（for any other purpose）必須當它不存在

inline box與斷行，溢出

行高(line-height)

如圖,咱們就知道了,在CSS中,line-height不是相鄰文本行間上一個baseline與下一文本行baseline之間的距離,而是line box的高度,也就是相鄰文本行間底線的距離

原文連接:Deep dive CSS: font metrics, line-height and vertical-align

line-height與可替換元素,非替換元素以及vertical-align

在例1中,決定line box高度的是line-height值,可是其實是content area以及vertical spacing決定的,line-height=content area+vertical spacing

須要注意的是,content area不等於font-size,只有在simsun(宋體)下,二者相等

經過上面幾個例子,能夠得出如下結論:

• 計算line box中每一個行內級盒的高度時,對於可替換元素,inline-block元素和inline-table元素,這個值就是其margin box的高度;對於inline box,這個值是其line-height

• 行內級盒是根據其vertical-align屬性豎直對齊的.若是它們是top或者bottom對齊,它們必須對齊得讓line box高度最小化.若是這樣的盒足夠高,存在多個解,而CSS 2.1沒有定義line box基線的位置

• line box高度是最高的盒的top與最低的盒的bottom之間的距離

空行內元素生成空的inline box,這些盒仍然具備margin,padding,border和line height,並所以會影響這些計算,就像有內容的元素同樣

行高的屬性值

值	描述
normal	默認屬性值.跟着用戶的瀏覽器走,且與font-size關聯,通常來講normal值接近於line-height:1.2
number	根據當前元素的font-size大小計算
length	使用具體長度值做爲行高值
%	使用百分比值做爲行高值,相對於設置了該line-height屬性的元素的font-size大小計算
inherit	行高繼承.IE8+

line-height與百分比值

在百分比行高值中,繼承的不是line-height:150%,而是font-size:16px與line-height:150%的行高值24px;

line-height與number值

在number行高值中,line-height會根據當前元素的font-size大小進行計算,能夠實現相應的比例縮放,因此通常建議使用number值

行高的屬性值相關參考

行高與圖片

行高與圖片

在例1中,咱們知道了圖片是基於baseline對齊的,因此行高影響的是文本的高度,而不是圖片的高度
在例2中,咱們放置了單張圖片,在父容器使用text-align:center,圖片受到影響,緣由是strut

對於一個內容由內聯級元素組成的塊容器元素，'line-height'指定了元素內行盒的最小高度。這個最小高度包含基線上方的最小高度和下方的最小深度，就像每一個行盒以一個具備該元素的字體和行高屬性的0寬內聯盒開始。咱們把這種假想盒叫作"strut"（這個名字是受TeX的啓發）

後面的幾個例子是圖片去除縫隙的解決方案,分別是:

• 圖片display:block

• 圖片vertical-align:bottom

• 父元素設置line-height:0 緣由是當line-height:0時,行盒的基線會上移

行高的實際應用

實現多行文本水平垂直居中

vertical-align

該屬性會影響由一個行內級元素生成的盒的行盒內部的豎直定位

默認狀況下,inline,inline-block以及table-cell能夠應用vertical-align

值	描述
length	把該盒提高（正值）或者下降（負值）這個距離。值'0cm'表示與「基線」相同
%	把該盒提高（正值）或者下降（負值）這個距離（'line-height'值的百分比）。值'0%'表示與「基線」相同
top	inline/inline-block元素:元素頂部和整行的頂部對齊,table-cell元素:單元格頂部padding邊緣和表格行的頂部對齊
bottom	inline/inline-block元素:元素底部和整行的底部對齊, table-cell元素:單元格底部padding邊緣和表格行的底部對齊
baseline	把盒的基線與父級盒的基線對齊。若是該盒沒有基線，就把bottom margin邊和父級的基線對齊
middle	把該盒的豎直中點和父級盒的基線加上父級的1/2x-height對齊
text-top	把該盒的top和父級的內容區（content area）的top對齊
text-bottom	把該盒的bottom和父級的內容區（content area）的bottom對齊
sub	把該盒的基線下降到合適的位置做爲父級盒的下標（該值不影響該元素文本的字體大小）
super	把該盒的基線提高到合適的位置做爲父級盒的上標（該值不影響該元素文本的字體大小）

在數值/百分比值中,vertical-align能夠用負值,並且百分比值提高或下降對應的是line-height值

去除圖片空隙的方法除了上面的幾個以外,還包括:

• 圖片vertical-align:top,vertical-align:middle

• line-height爲number時,font-size:0

在table-cell中,高度不足會使用padding填充

vertical-align:middle與垂直居中

這個例子用到的也是父元素font-size:0,圖片垂直中心點會上移,並與容器垂直中心點重合,可是這種方法有缺陷,由於若是後面須要插入問題的時候,不會顯示出來

vertical-align:middle與垂直居中修改版

這裏,咱們在圖片後面插入了一個空span而且設置爲vertical-align:middle,二者都往下偏移,而後垂直中心點重合

vertical-align:text-bottom與表情圖片文字對齊

例1中,baseline對齊表情會略微高過文字
例2中,bottom對齊容易受到其它行內元素影響,比方說插入一張vertical-align:top的圖片
例3中,middle須要注意圖片的大小,圖片過大,圖片會相對於文字下沉,並且在IE6/7中有兼容性問題
例4中,text-bottom是比較合適的用法,由於它不受行高和其它行內元素影響

vertical-align:text-bottom與baseline

在例1中,圖片下面有個很大的空白區,它的緣由是圖片和X與父級的content area底部對齊,而line-height:250px;底部的空白區是X的下邊距

在例2中,圖片和X都vertical-align:top,也就是與父級的content area頂部對齊,這時,圖片後面的普通文本是line-height:250px的文本,圖片下方的空白至關於文本的下邊距

vertical-align與line-height

任意數目圖片兩端對齊效果未完成

在上面的例子中,最後一行圖片的的空隙明顯要比圖片默認狀況下的空隙大,這是爲何呢,咱們先看一個例子

解釋空隙大的例子

在例1中,咱們定義了一個空的inline-block盒以及一個帶字符的inline-block盒,第一個盒子的底邊緣和第二個盒子的baseline對齊,也就是說,空inline-block盒子的底邊緣是它的基線

在例2中,咱們設置了line-height:0,此時,一個0高度的inline-block有一個有高度的字符,因此它的半間距等於負的字符/2,也就是inline-block會下沉1/2個字符,盒子的上邊緣在字符的中心點上

在CSS標準中是這樣寫的:

'inline-block'（盒）的基線是它的最後一個常規流中的行盒的基線，除非它沒有流內行盒或者它的'overflow'屬性的計算值不爲'visible'，此時基線是bottom margin邊

因此,空隙過大的緣由是,圖片是baseline對齊的,而line-height:0時,字符X會下沉1/2,這裏多出來的空隙是1/2baseline的高度

修復的方法:

• 父容器line-height:0,最後一個空inline-block插入一個字符,這時空隙就會消失

• 元素vertical-top

• 元素vertical-bottom

任意數目圖片兩端對齊效果

須要注意的是,若是空inline-block元素使用vertical-align:bottom時,是元素底部與整個行盒底部對齊,也就是說要保證每一個單獨的元素都設置vertical-align:bottom

vertical-align與IE6/7

在IE6/7下使用vertical-align圖文一體化,圖片上下留白相等,而現代瀏覽器則不同

解決辦法:在圖片後面的文字inline-block化

vertical-align實例

不固定尺寸圖片或多行文字垂直居中

1. 主體元素inline-block化

2. 添加一個寬度0高度100%的輔助元素

3. 給這兩個元素vertical-align:middle