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