從零基礎到輕鬆就業 | CSS——CSS 基本視覺格式化：② 「行內盒子」格式化（ Ⅱ ）

原創：itsOli  @前端一萬小時

本文首發於公衆號「前端一萬小時」

本文版權歸做者全部，未經受權，請勿轉載！
複製代碼

---

🔗緊接上篇文章

2.1.3 「文本行」基礎概念——內容區、行內框/行內盒子、間距、行框

1. 內容區

• 非替換元素中，內容區能夠是元素中各字符的 em 框串在一塊兒構成的框（font-size 的值肯定了各個 em 框的高度），也能夠是由元素中字符字形描述的框。換句話說，內容區的高度就是 font-size 的值。

• 替換元素中，內容區就是元素的固有高度再加上可能有的 margin、邊框或 padding。

2. 行間距

行間距是 font-size 與 line-height 的差值，被分紅兩半在內容區的上下（上下半間距）。

行間距只應用於非替換元素。

3. 行內框（即行內各個元素對應生成的「行內盒子」）

• 非替換元素，行內框高度 = line-height ；

• 替換元素：
  ① 「替換元素」不與文字結合（如 img 元素）：行內框高度 = 替換元素的固有高度再加上可能有的 margin、邊框或 padding ；
  
  ② 「替換元素」與文字結合（如 input 中 type=text 、 type=textarea 、 type=button 等與文字結合的表單元素）：若是字體行高大於「替換元素的固有高度再加上可能有的 margin、邊框或 padding」，則「行內框」的高度爲「行高」。不然就是「替換元素的固有高度再加上可能有的 margin、邊框或 padding」。總之就是「誰大是誰」！

4. 行高

兩行文字「基線」的距離。

5. 行框（即文本整行對應生成的「行內盒子」）

一行有不少「行內盒子——inline box」，「行框」是包含該行中出現的「行內盒子」的最高點和最低點的最小盒子。

換句話說，「行框」的上邊界要位於最高「行內盒子」的上邊界，而「行框」的底邊要放在最低「行內盒子」的下邊界。

6. 基線

不一樣元素的「基線」位置不一樣，整個「行框」會有一個「基線」，行內元素的位置是基於二者「基線」對齊。

2.2 行內盒子格式化

要弄清「行內盒子格式化」，讓咱們先充分理解關於「文本」的兩個重要屬性——line-height 和 vertical-align。

2.2.1 line-height

❗️line-height 隻影響行內元素和其餘行內內容，而不影響塊級元素，至少不會直接影響塊級元素。

❗️line-height 有繼承性。

2.2.2 vertical-align

做爲 line-height 的「斷背」：vertical-align，這個屬性只能用於「行內元素」和「替換」元素，且不能繼承。

行內元素/替換元素 {
  vertical-align: 值;
}
複製代碼

有如下「值」能夠取：

• baseline
  元素基線與父元素的基線對齊。
  
  ❗️對於一些可替換元素，好比 type=textarea ， HTML 標準沒有說明它的基線，這意味着對其使用這個關鍵字時，各瀏覽器表現可能不同。

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

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

• text-top
  元素頂端與父元素字體的頂端對齊。

• text-bottom
  元素底端與父元素字體的底端對齊。

• middle
  元素中垂線與父元素的基線加上小寫 x 一半的高度值對齊。

• length
  元素基線超過父元素的基線指定高度（能夠取負值）。

• percentage
  同 length，百分比相對於 line-height——🤣這是證實他們倆是「斷背」強有力的證據。

💡如下兩個值是相對於整行文原本說的：

• top
  元素及其後代的頂端與整行的頂端對齊。

• bottom
  元素及其後代的底端與整行的底端對齊。

若是元素沒有基線 baseline，則以它的外邊距的下邊緣爲基線。

下一篇咱們繼續講解 CSS「行內盒子」格式化相關的知識點。

祝好，qdywxs ♥ you！