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