行盒(line box)垂直方向的屬性詳解：從font-size、line-height到vertical-align

時間 2019-12-14

標籤 line box 垂直方向屬性詳解 font size height vertical align 简体版

原文原文鏈接

視覺格式化模型

在一個文檔中，每一個元素都被表示爲0、1或多個矩形的盒子。肯定這些盒子的尺寸, 屬性 --- 像它的顏色，背景，邊框方面 --- 和位置是渲染引擎的目標。_①php

在CSS中，使用標準盒模型描述這些矩形盒子中的每個。這個模型描述了元素所佔空間的內容。每一個盒子有四個邊：外邊距邊, 邊框邊, 內填充邊與內容邊。_①css

盒的種類又分爲：塊級盒和行內級盒。以下_②web

一些附加概念：segmentfault

塊容器盒：直接包含的所有是塊級盒的盒子稱爲塊容器盒，它自己可能不是塊級盒，好比非替換行內塊及非替換表格單元格，不是塊級盒。
塊盒：同時是塊容器盒的塊級盒稱爲塊盒。
匿名塊盒：一個塊容器盒內若是同時有塊級盒和行內級盒，那麼會自動建立匿名塊盒來包含行內級盒。
行內盒：生成行內格式化上下文的行內級盒稱爲行內盒。
原子行內級盒：對於display爲inline-block/inline-table的盒子，稱爲原子行內級盒，由於原子行內級盒就像一個原子同樣，不能拆分紅多個(盒)，由於不能換行。
匿名行內盒：相似於匿名塊盒，CSS引擎有時候有必要生成匿名行內盒。常見的例子是塊級盒直接包含文本，那麼這些文本將包含在匿名行內盒中。(空白若是使用white-space去掉，則不會生成匿名行內盒)
行盒：由行內格式化上下文產生的盒稱爲行盒，用於表示一行。行盒從包含塊的一邊排版到另外一邊。當有浮動時，行盒從左浮動的最右邊排到右浮動的最左邊。

行盒

因爲咱們今天討論的是內聯元素垂直方向上發生的事，因此咱們直接討論一個行盒的內部行爲便可，一個行盒能夠由塊級盒產生，也能夠由行內級盒產生，它描述了一行行內元素的渲染方式。一個行盒的內部組成是這樣的：(不太會用PS，作的醜了一點，將就看一下……)瀏覽器

頂線(top line)
在印刷字體中，頂線的定義是小寫字母k或h的最高點對應的線_③。不過咱們在實際使用中發現小寫字母k或h的最高點並無到達頂線的位置，最高點的位置還與所用的字體有關，通常咱們的網頁中所用的字體，頂線的位置都會比k或h的最高點更高一些。像上圖所示的那樣。因此把頂線理解成文本的最高點對應的線比較好。ide

底線(bottom line)
底線的定義是小寫字母y的最低點對應的線，如上圖所示。wordpress

中線(middle line)
中線的定義是小寫字母x的交叉點對應的線，注意，這並非真正的內容區中線。字體

基線(base line)
基線的定義是小寫字母x的最低點對應的線。這條線也是 vertical-align 默認採用的垂直對齊方式，即baseline。ui

內容區
從頂線到底線之間即爲內容區。spa

行間距
行間距能夠認爲是line-height與內容區高度之間的差值，準確地描述是上一行的底線到下一行的頂線之間的距離，便可以認爲是非內容區域的高度。

行內框
對非替換行內級元素來講，行內框高度就是它自己的line-height，對於替換行內級元素來講，行內框高度是它的實際高度。

行高
上一行基線到下一行基線的高度，能夠認爲是line-height(畢竟人家中文名字就叫行高啊>_<|||)。

行框
本行盒內全部行內框裏最大的一個決定了行框，至關於最大的一個行內框把行盒撐開了。好比行盒內有一個有內容的span的line-height大於行盒自己的line-height，那麼行盒自己會被撐大。

font-size

font-size是一個咱們常常使用的屬性，有時查文檔，會看到這個的定義是字體的大小，這不成了翻譯了嘛，其實font-size的精肯定義是，大寫字母S的最高線到小寫字母y的最低線的距離。_④

line-height

一個行盒的基本表現，除了由font-size決定，還由line-height決定，正如上面說的，行高決定了上下兩行之間基線的垂直距離，便是一行的高度。咱們從上面的說明圖片來看，line-height便是綠色區域加文字內容區域的高度。當設置了font-size屬性後，再根據字體，就決定了文字內容區的高度，line-height決定了行高，line-height減去內容區高度後，剩餘的高度便是行間距，這個行間距被平均地分到內容區的上下兩側。

對於塊級元素來講，line-height指定了其內部行內盒的最小高度。對於非替換行內元素來講，line-height用於計算其行盒的高度，對於替換內聯元素來講，line-height對它沒有影響。

vertical-align

vertical-align屬性定義了行內級盒的垂直對齊方式。注意是行內級盒，這樣描述比較精確，由於行內級盒包括行內盒、原子行內級盒還有匿名行內盒，這些盒均可以用vertical-align控制垂直對齊，塊級盒的vertical-align屬性是無效的。不過顧名思義，對齊，至少要有兩個東西才存在對齊一說吧，因此究竟是什麼與什麼對齊呢？更加精確的描述,vertical-align定義了行內級盒相對於父元素行盒的垂直對齊方式。(行盒的概念在上方插圖中有，它是由行內格式化上下文產生的盒)

vertical-align能夠取的屬性值_⑤：

baseline
默認值，元素基線與父元素基線垂直對齊，對於替換行內元素來講，因爲沒有明肯定義它的基線，因此各個瀏覽器下的表現可能不同。

sub
元素基線與父元素的下標的基線對齊。

super
元素基線與父元素的上標的基線對齊。

text-top
元素頂端與父元素文字內容區的頂端對齊。

text-bottom
元素底端與父元素文字內容區的底端對齊。

middle
元素中線與父元素的小寫x中線對齊。

top
元素的頂端與父元素的頂端對齊。

bottom
元素的底端與父元素的底端對齊。

< length>
元素基線超過父元素基線的指定高度，能夠取負值。

< percentage>
元素基線超過父元素基線的百分比高度，這個百分比是對於元素自身的line-height來講的。(注意line-height是能夠繼承的，若是子元素沒有特地設置line-height，那麼將繼承父元素的line-height)