揭开 CSS 视觉格式化模型的奥秘

CSS 的视觉格式化模型（Visual Formatting Model）定义了如何将文档的元素转换为视觉上的布局。同样也是其核心之一。这是浏览器根据 CSS 属性来计算和呈现元素的外观及其相互关系的核心机制。视觉格式化模型基于元素的类型、文档树结构、CSS 样式属性等来确定每个元素的尺寸、位置和显示方式。

0. 为什么其重要呢？

在了解 视觉格式化模型 之前，需要知道它为什么重要，重要在哪里？

概括而言，CSS 的视觉格式化模型是决定网页布局和视觉呈现的核心机制。

1、决定元素如何显示和布局

比如，盒模型是视觉格式化模型的基础，定义了元素的大小和在页面中的位置。不同的 display 属性值，影响了元素的流动方式以及它与其他元素如何排列。

2、影响页面的响应性和可视化体验

比如，使用不同的格式化规则（float、flex 等）实现复杂的响应式设计。

3、确保元素在不同上下文中的行为一致

比如，创建 BFC 可以防止父元素因子元素浮动而高度塌陷，确保布局的稳定。

4、保证网页的可访问性

比如，overflow、visibility、z-index 等不仅影响页面元素的层次，还决定了哪些元素在屏幕阅读器中可见或可操作，影响了无障碍体验。

5、处理视觉重叠和层次

比如，通过 z-index 和 position 属性来控制元素的前后展示顺序，避免视觉混乱。

6、性能优化

比如，优化布局的计算和渲染过程，避免不必要的重排（reflow）和重绘（repaint），从而提升网页的渲染性能和用户体验。

以上是其重要性体现，接下来具体介绍一下：

1. 盒模型（Box Model）

所有的 HTML 元素在页面中都是一个矩形框，称为盒子（box）。每个盒子由四个主要部分组成：

- 内容区（content box）：元素的实际内容所在区域。

- 内边距（padding）：内容和边框之间的空间。

- 边框（border）：围绕内容和内边距的线条。

- 外边距（margin）：元素与相邻元素之间的距离。

浏览器根据元素的 width、height、padding、border 和 margin 这些属性计算元素的总大小。

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 10px solid pink;
  margin: 15px;
}

计算总宽度 = width + padding（左右）+ border（左右）+ margin（左右）= 200 + 20*2 + 10*2 + 15*2 = 290px。

2. 块格式化上下文（Block Formatting Context, BFC）

BFC 是一个独立的容器，容器内部的元素布局不会影响外部元素，反之亦然。通常以下情况会触发 BFC：

- float 不为 none；

- overflow 为 hidden、scroll、auto；

- display 为 flex、inline-block、table 等。

BFC 能有效解决 浮动元素的清除问题 和 外边距塌陷问题。

3. 正常流（Normal Flow）

正常流是页面布局的默认方式，元素根据其 display 属性在页面上呈现为块级元素或行内元素。大部分元素都依赖于正常流进行布局。

1、块级元素：占据父容器的全部宽度，从上到下依次排列，如 div、p、h1 等；

2、行内元素：在水平方向上排列，只占据它们内容的宽度，不会自动换行，直到当前行无法容纳更多内容时才会换行，如 span 元素、a 元素等。

3.1 行框格式化上下文

1、行内元素会在 行框格式化上下文 中布局。行框是容纳行内元素的区域。浏览器会在同一行中放置尽可能多的行内元素，剩余的部分则会换行。

2、宽高由内容决定，且不影响其他块级元素的布局。行内元素的 padding 和 margin 只会影响水平方向，不会影响垂直方向的布局。

3、行内元素之间的空白符号（如空格、换行）会被认为是内容的一部分，因此它们的宽度也会影响布局结果。

4. 浮动和清除（Float and Clear）

浮动（float）属性将元素从正常流中移除，使其向左或向右浮动。

清除（clear）属性用于阻止元素被浮动元素包围，从而将元素放置到浮动元素下方。

.img {
  float: left;
  margin-right: 10px;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

浮动常用于图文混排，而清除则用来确保容器能够包含浮动元素。

5. 定位机制（Positioning Scheme）

CSS 提供了几种定位方式：

1、静态定位（static）：默认值，元素按照正常流排列。

2、相对定位（relative）：元素在正常流中的位置相对移动，但仍占据原位置的空间。

3、绝对定位（absolute）：元素脱离正常流，相对于最近的定位祖先（position 不为 static）进行定位。

4、固定定位（fixed）：相对于浏览器窗口定位，元素不会随页面滚动。

5、粘性定位（sticky）：元素根据滚动位置在相对和固定定位之间切换。

.relative {
  position: relative;
  top: 10px;
  left: 20px;
}
.absolute {
  position: absolute;
  top: 0;
  left: 0;
}

5.1 包含块（Containing Block）

每个元素在页面中的位置和尺寸通常相对于它的包含块计算。大部分情况下，包含块就是距离它最近的定位祖先元素，或者视口（viewport）。

5.2 层叠上下文（Stacking Context）

层叠上下文决定了页面中元素的 z-index 和绘制顺序。通常情况下，position 为 relative 或 absolute 的元素会创建新的层叠上下文。层叠上下文的优先级会影响元素的前后顺序。

6. 外边距合并（Margin Collapse）

在块级上下文中，相邻块元素的垂直外边距会合并为其中较大的一个，而不是简单地相加。

div {
  margin: 20px;
}

如果两个 div 垂直相邻，彼此之间的外边距并不会是 40px，而是 20px。

7. Flexbox 布局模型（Flexible Box Layout）

Flexbox 是 CSS3 引入的用于高效对齐和分配容器空间的布局模型。它通过定义 flex 容器和 flex 项目来实现灵活的布局方式。常见的属性包括 justify-content、align-items、flex-direction 等。

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-item {
  flex: 1; /* 占据等比的空间 */
}

8. 网格布局（Grid Layout）

CSS 网格布局（Grid Layout）是另一种二维布局系统，适合创建复杂的页面布局。它允许精确控制行和列的大小、位置和对齐方式。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

9. 媒体查询（Media Queries）

CSS 的媒体查询在响应式设计中发挥了重要作用。虽然这与视觉格式化模型的布局阶段没有直接关系，但它控制了元素在不同设备和窗口尺寸下的布局模式。

媒体查询可以用来在不同条件下切换布局规则，允许根据设备的特性（如宽度、分辨率等）动态应用不同的样式。它是响应式设计的核心技术之一。

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

当屏幕宽度小于 768px 时，.container 中的元素会以列的形式排列。 

总结：

CSS 视觉格式化模型将 HTML 元素转换为一个复杂的布局结构，涉及多个步骤和机制。理解这些核心概念，可以更好地掌握布局的原理，并灵活应用不同的布局技术，创建精美的网页。