视觉格式化模型——基础概念

视觉格式化模型（Visual formatting model）

视觉格式化模型（Visual formatting model）是用来处理和在视觉媒体上显示文档时使用的计算规则，CSS 中一切皆盒子，而视觉格式化模型简单来理解就是规定这些盒子应该怎么样放置到页面中去

官方文档

Box

Box 是 CSS 布局的基本单位：所有页面都是由一个个Box组合而成的，元素的类型和display属性决定了Box的类型

Box 是描述元素跟它的父元素与兄弟元素之间的表现

1、Block-level Box（块级盒）

• 当 display 为 block list-item table flex grid flow-root 等值的时候，会让元素生成块级盒，可以让这个元素变成一个块级元素
• 块级盒在视觉上呈现为块，垂直排列，且独占一行，可以设置其宽高
• 会参与 BFC

2、Inline-level Box（行内级盒）

• 当 display 为 inline inline-block inline-table inline-flex inline-grid 等值的时候，会让元素生成行内级盒，可以让这个元素变成一个行内元素
• 行内级盒在视觉上与其它行内级盒排列为多行，水平排列，当一行放不下的时候，会自动切换到下一行继续按照列排布，不能设置宽高（除 inline-block）
• 会参与 IFC

容器

容器是描述元素跟它的后代之间的影响

1、block container box（块容器盒）

• 容器自身是一个块级盒
• 只包含块级元素的容器
• 只包含行内元素的容器

一个块容器盒不能同时含有块级元素和行内元素，如果同时包含，浏览器会自动处理，创建匿名块盒

如下情况

<div class="container">
  <p>这是块级元素</p>         <!-- 块级元素 -->
  <span>这是行内元素</span>   <!-- 行内元素 -->
  <a>这是行内元素</a>         <!-- 行内元素 -->
  <div>这是块级元素</div>     <!-- 块级元素 -->
</div>

xxxxxxxxxx .clear::after{  /* 适用于大部分浏览器 /    content: "";    display: block;    height: 0;    clear: both;    visibility: hidden;}.clear{  / IE6清除浮动的方法 */   *zoom: 1;}css

2、flex container box（弹性容器）

• display 为 flex inline-flex
• 会创建弹性格式化上下文（FFC）

3、grid container box（栅格容器）

• display 为 grid inline-grid
• 会创建网格格式化上下文（GFC）

没有行内容器盒

一个行内级盒子，子元素只能是行内级盒子，而无论包裹多少个行内级盒子，仍然是一个行内级盒子，不会成为一个容器

Block Boxes（块盒）

既是块级盒，又是块容器盒被称为块盒

块容器盒自身必定是一个块级盒 但是块级盒不一定是一个快容器盒

Line Boxes（行盒）

行盒是由 IFC 产生的盒，用于表示一行

• 在块盒内部，行盒从左到右排列
• 当遇到浮动元素，会避开浮动元素