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

原創：itsOli  @前端一萬小時

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

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

---

🔗緊接上篇文章

3 關於「盒子」咱們必定須要知道的——基本視覺格式化

3.1 「盒子」的生成

盒子的生成是 CSS 「視覺格式化模型」的一部分，用於從文檔元素生成盒子。

盒子有不一樣的類型，盒子的類型取決於 CSS 的 display 屬性——元素「角色」的改變。

3.1.1 「塊級元素」和「塊級盒子」

設置元素的 display 屬性爲 block、list-item 或 table 時，該元素將成爲「塊級元素」。

這些元素在正常流中時，會在其框以前和以後生成「換行」，因此處於正常流中的塊級元素會「垂直」擺放。

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

💡（「正常流」是指：西方語言文本從左向右、從上向下顯示的方向，這也是咱們熟悉的傳統 HTML 文檔的文本佈局方向。注意，在非西方語言中，流方向可能不一樣。）

但，元素是不是「塊級元素」僅是元素自己的屬性，並不直接用於格式化上下文的建立或佈局。

一個「塊級元素」會被格式化成一個塊（例如文章的一個段落），且默認按照垂直方向依次排列。

💡一個「塊級元素」都會至少生成一個「塊級盒子」，也有可能生成多個（例如列表項元素）。而「塊級盒子」纔會參與「塊格式化上下文（block formatting context）」的建立。

3.1.2 「行內級元素」和「行內盒子」

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

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

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

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

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

🏆小總結： 相對更詳細的「盒子」細分。

❗️注意： 必定要記得的是，display 之因此得名，是由於它影響的是元素如何「顯示」，而不影響他本質上是何種元素，也就不能亂玩「嵌套關係」！

一個極端的反例就是：你不能讓一個「連接」來包圍一個「段落」。

<a href="http://…" style="display: block;">
<p style="display: inline;">這是一個錯誤的示例</p>
</a>
複製代碼

（對於生成不一樣類型「盒子」在實際項目中的運用，咱們將在後續文章詳細討論。例如：怎樣給「連接」加樣式——生成導航欄、怎樣給「表單」加樣式等。）

下一篇咱們繼續講解「塊盒子」相關的知識點。

祝好，qdywxs ♥ you！