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

原創：itsOli  @前端一萬小時

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

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

1. 塊級元素和行內元素分別有哪些？ 空（void）元素有哪些？塊級元素和行內元素有什麼區別？
2. IE 盒模型和 W3C 盒模型有什麼區別?
3. 在什麼場景下會出現外邊距合併？如何合併？如何不讓相鄰元素外邊距合併？給個父子外邊距合併的範例？

4. 關於 .item {width: 100%;}，如下說法正確的是：
  ❌ .item 的寬度（包括左右 margin、左右邊框、左右 padding、content）等於它父親的寬度（包括左右
     margin、左右邊框、左右 padding、content）。
  ❌ .item 的寬度（包括左右邊框、左右 padding、content）等於它父親的寬度（左右邊框、左右 padding、
     content）。
  ❌ .item 的寬度（左右 padding、content）等於它父親的寬度（左右 padding、content）。
  ✅ .item 的寬度（content）等於它父親的寬度（content）。
  ❌ 若是設置了 * {box-sizing: border-box}，.item 的寬度（包括左右邊框、左右 padding、
     content）等於它父親的寬度（左右邊框、左右 padding、content）。
複製代碼

🙋上方面試題「參考答案詳解」，請點擊此處查看獲取方式！

---

前言： 接下來的幾篇系列文章咱們講一個東西：盒子（BOX）。

「盒模型」（Box Model）做爲 CSS 看待元素的一種方式，CSS 將每一個元素都看做由一個盒子表示。從某方面來講，對於初級、中級學習者的咱們，大可將 CSS 的學習看做是對「盒子」的學習。
本篇咱們將闡述最基本的理論知識，將「盒子」的方方面面一步步帶到你的跟前。

1 什麼是「盒子」

「盒子 box」由 CSS 引擎根據文檔中的內容所建立，主要用於文檔元素的格式化、定位和佈局等。

盒子與元素並非一一對應的，有時多個元素會合並生成一個盒子，有時一個元素會生成多個盒子（如匿名盒子）。

一個完整的「盒子」中心有一個內容區（content area）。這個內容區周圍有可選的 padding、邊框和 margin。這些項之因此被認爲是可選的，是由於它們的寬度能夠設置爲 0，實際上就是從「盒子」上去除這些項。

下圖爲一個完整的「盒子」：

2 「視覺格式化模型」概述

CSS 視覺格式化模型（Visual formatting model）是用來處理和在視覺媒體上顯示文檔時使用的計算規則。

通俗的講就是：頁面（文檔樹）能夠想象成是由一個個 box 組合而成的，而「視覺格式化模型（Visual formatting model）」 是一套規則，將這些 box 「佈局」成訪問者看到的樣子。

每一個盒子的「佈局」由如下因素決定（本篇文章和下一篇文章主要講解第 ①、② 點，其屬於「最基本的視覺格式化」，而對於剩下的要點，咱們在接下來的系列文章中會挨個討論）：

① 盒子的尺寸：精確指定、由約束條件指定或沒有指定；
② 盒子的類型：行內盒子（inline box）、行內級盒子（inline-level box）、原子行內級盒子（atomic inline-level box）、塊盒子（block box）；

③ 定位方案（positioning scheme）：普通流定位、浮動定位或絕對定位；
④ 文檔樹中的其餘元素：即當前盒子的子元素或兄弟元素；
⑤ 視口尺寸與位置；
⑥ 所包含的圖片的尺寸；
⑦ 其餘的某些外部因素。

每個元素都是一個「盒子」，「盒子」能夠嵌套「盒子」：

💡如上圖所示，視覺格式化模型會根據盒子的「包含塊」（containing block）——（包含其餘盒子的塊稱爲「包含塊」）的邊界來渲染盒子。一般，盒子會建立一個包含其後代元素的「包含塊」，可是盒子並不禁「包含塊」所限制，當盒子的佈局跑到「包含塊」的外面時稱爲溢出（overflow）。

上圖中，section 的包含塊是 body，header、article、footer 的包含塊是 section。

❗️區別：

• 「盒子模型」是處理盒子自己的內部屬性——邊距、邊框等；
• 而「視覺格式化模型」是用來處理這些盒子的擺放。

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

祝好，qdywxs ♥ you！