CSS 行內佈局實踐小結

前言

一般狀況下，要使元素排列在一行內，一般作法就是使用float，而後再清浮動。
以下：

可是若是要使其垂直居中，則必須手動調整，藍色或者綠色塊的位置，比較繁瑣。

或者另一種方法，使用inline-block或inline（即IFC），恰好在這裏碰到了點坑。

相關css

IFC（Inline formatting contexts）內聯格式上下文 ╮(￣▽￣)╭
主要影響IFC內佈局的css

• font-size
• line-height
• height
• vertical-aligin

line-box

行盒模型，這是一個顯示區域，根據塊狀容器內，每一行的多個內聯元素（inline-level element）都會共同生成一個行盒模型。

font-size

常見的屬性，用來指定文本類型節點的大小。IFC內的不少屬性的值是基於這個的。

line-height & height

行高在w3c中更明確的定義：

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element.The minimum height consists of a minimum height above the baseline and a minimum depth below it。

在一個由多個內聯元素組成的塊狀容器內，'line-height'爲內聯元素的行盒模型指定了一個最低高度。
這個最低高度是分別由基線上的最小高度和基線下的最小深度組成。

盜張圖的來示意下，從上到下四條線分別是頂線、中線、基線、底線。
那麼行高是指上下文本行的基線間的垂直距離，即圖中兩條紅線間垂直距離（實際在數值上，行高也等於其它相同顏色間的距離）。

換種思路來理解下行高。
實際上不少狀況下，一個容器中是隻有一行的即只有一條基線，行高是如何計算，以確保這個間距呢?
以下：

藍色是容器的範圍，邊界線之間是一個line box。文字其中的內聯元素。

因此，

當line-height > font-size時

一個爲被設定高度的容器被設定一個行高時，內聯元內容的上下會增長2個空白內容的高度。而容器的高度也會撐開，使容器的高度與line-height相等。

a1 + b1 +c1 == line-height & a1 == c1

若是容器的高度已經被設定，那麼超出容器下邊界線的部分則不影響佈局。

當line-height < font-size時，

容器未被指定高度時，容器的上下兩側塌陷(相似於margin爲負值的狀況)，但上述公式仍成立。

a1（負值） + b1 + c1(負值) == line-height & a1 == c1

以下所示:

白色是塌陷的部分(即 a1 和 c1)，紅色是line-height，若是把容器設置爲 overflow:hidden,
那麼就只能看見紅色的部分。

若是容器被指定height高度時，

height > line-height，那麼黃線會下移，紅色部分會展現更多，
height < line-height，那麼黃線會上移，紅色的部分被遮蓋的更多了。

因此在這裏的狀況是，

決定容器高度的優先級 height > line-height > font-size

vertical-align

垂直對齊線，默認爲baselien，來自W3C的定義：

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

該屬性影響由多個內聯元素生成的盒模型組成的行內盒模型的垂直定位

vertical有幾個特定的值，或者指定一個值。

<p class="a1">
  <span style="vertical-align:60px;">
    English中文
  </span>
  <span>
    中文English
  </span>
</p>

給第一個span，設置60px的垂直偏移量，顯示以下：

其中，黃色線就是基線（baseline），綠線和黃線的間隔即爲60px。
這裏會發現，容器（藍色）的高度被撐高了。

容器的高度 height = line-height + vertical-align

固然同理,若是容器的高度被指定了，那麼高度則不變，而超出的部分則不影響佈局。若是設置overflow:hidden，超過的部分則不可見。

而vertical-align的其它特殊值，都可以看作一個根據容器高度而變化的相對值。

結論

熟練使用inline-level element和行內佈局的屬性，以很是快速完成垂直居中和水平居中的效果，而且有良好的可維護性和拓展性。

參考

W3C IFC
W3C line-height和vertical-aligin
line-height詳解