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

原創：itsOli  @前端一萬小時

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

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

1. line-height: 2; 和 line-height: 200%; 有什麼區別?
2. 在什麼場景下會出現外邊距合併？如何合併？如何不讓相鄰元素外邊距合併？給個父子外邊距合併的範例。
3. 行內元素的「邊框」、「邊界」等「框屬性」是由 font-size 仍是 line-height 控制？
4. height=line-height 能夠用來垂直居中單行文本？代碼怎麼實現？
5. inline-block 有什麼特性？
6. inline-block 在實際工做中有什麼做用？
7. 怎麼去除兩個按鈕中間的縫隙問題？
8. 一個頁面有一排高度不同的產品圖，這時若是咱們用 inline-block，怎樣使他們「頂端對齊」？
複製代碼

---

前言： 做爲學習「基本視覺格式化」的第二篇，咱們在對上一篇中「塊盒子」整個「格式化」過程當中能夠獲得——所謂的「格式化」，其實就是肯定這個「塊/行內 盒子」的自身長度、高度，以及與其上下左右相鄰「盒子」之間的距離和協調的過程。在肯定這個「長度、高度、距離和協調」的過程當中會有不少「規則」，那咱們學的就是這個「規則」。

接下來的「行內盒子」格式化相對於「塊盒子」格式化的知識點會更細、更分散。不過做爲最基本的理論知識，這篇依然很重要。

1 「行內盒子」怎麼來的

當元素的 display 屬性爲 inline、inline-block 或 inline-table 時，該元素將成爲「行內級元素」。

選擇器 {
  display: inline、inline-block 或 inline-table;
}
複製代碼

這些元素不會在以前或以後生成「行分隔符」，因此處於正常流中的行內元素會 「水平」 擺放，它們是塊級元素的後代。

顯示時，它不會生成內容塊，可是能夠與其餘行內級內容一塊兒顯示爲多行。

同理，「行內級元素」會生成「行內級盒子」，該盒子同時會參與「行內格式化上下文（inline formatting context）」的建立。

🏆小總結：
「行內元素」在一個文本內生成「行內盒子」，而不會打斷這行文本（即這種元素能夠出如今另外一個元素的內容中，而不會破壞其顯示，常見的如：a、 span 、 strong 、 em 等）。

2 「行內盒子」格式化

在正式學習前，有一個觀念咱們須要創建：
從某種程度上來說，塊級元素中包含的各「文本行」自己都是「行內元素」（即便它沒有用行內元素的標記包圍起來）。

既然「文本行」能夠看做是「行內元素」，那咱們就能夠把抽象化的「行內元素」、「行內盒子」具象成：給「文本」格式化。而後觸類旁通，完全弄懂與之相關的全部知識。

接下來，咱們先學習一些前置基礎知識，而後再細講怎樣「格式化」。

2.1 一些基本概念

2.1.1 匿名文本

<div>生活不像林黛玉<span>不會由於憂鬱</span>而風情萬種</div>
複製代碼

未包含在行內元素的字符串（生活不像林黛玉 而風情萬種）就叫「匿名文本」。

注意，空格也是匿名文本的一部分，由於空格與其餘字符同樣都是正常的字符。

2.1.2 非替換元素、替換元素

• 非替換元素： 若是元素的內容包含在文檔中，則稱之爲「非替換元素」。

例如：若是一個段落的文本內容都放在該元素的自己以內，這個段落就是一個「非替換元素」。

• 替換元素： 指用做爲其餘內容佔位符的一個元素。

例如：
img 元素，它只是指向一個圖像文件，這個圖像文件將插入到文檔流中該 img 元素自己所在的位置；大多數「表單」元素也能夠「替換」（如 <input type="radio"> ）。

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

祝好，qdywxs ♥ you！