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

原創：itsOli  @前端一萬小時

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

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

---

🔗緊接上篇文章

3.2 不一樣類型「盒子」在格式化方式上也有所不一樣

本篇咱們主要探討 「塊盒子」格式化，下篇文章討論「行內盒子」格式化。

塊盒子：

3.2.1 水平格式化

正常流中，「塊盒子」的水平部分 = 其父元素的 width = 7 個屬性之和——（margin-left ➕margin-right） ➕ （padding-left ➕padding-right）➕（border-left➕border-right）➕內容區自身 width。

在這 7 個屬性中只有 3 個屬性的值能夠設置爲 auto：width、margin-left、margin-right。其他的要沒必要須是肯定的值，要不就是默認值 0。

🚀可詳細分爲如下 5 種組合：

• 3 個都不是 auto：按 CSS 的術語來說，這叫「格式化屬性過度受限」，此時總會把 margin-right 強制爲 auto 來適應父元素的寬度；

• 2 個不是 auto：是 auto 的將自動調整到適應父級元素的寬度；

• margin-left、margin-right 是 auto：他們會自動設置爲相等的長度，致使此元素在其父級元素中居中；

• 一個 margin 和 width 是 auto：auto 的 margin 會減爲 0，width 自動填充其包含塊；

• 3 個都是 auto：兩個外邊距減爲 0，width 會盡量的寬（自動充滿）。

❗️注意：因爲水平 margin 不會合並，父元素的 padding、邊框、margin 可能會對子元素帶來「偏移」的影響。

3.2.2 垂直格式化

正常流中，「塊盒子」的垂直部分 = 其父元素的 height = 7 個屬性之和——（margin-top ➕margin-bottom） ➕ （padding-top ➕padding-bottom）➕（border-top ➕border-bottom）➕內容區自身 height。

同理，在這 7 個屬性中只有 3 個的值能夠設置爲 auto：height、margin-top、margin-bottom。其他的要沒必要須是肯定的值，要不就是默認值 0。

❗️不過，margin-top 和 margin-bottom 設置爲 auto 也沒有什麼用，由於會被重置爲 0。因此，想利用上下 margin 都是 auto 來垂直居中是不可能的。

垂直格式化的另外一個重要方面是垂直相鄰 margin 的合併。

這種合併行爲只應用於 margin，若是元素有 padding 和邊框，padding 和邊框是不會合並的。當兩個或更多垂直 margin 相遇時，他們將造成惟一一個 margin，這個 margin 的高度等於兩個發生疊加的 margin 的高度中的較大者。

❗️注意：當一個元素包含在另外一個元素中時，彼此相鄰的 margin-bottom 和 magin-top 也會發生疊加，取較大者。

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

祝好，qdywxs ♥ you！