从零基础到轻松就业 | 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！