视觉格式化模型

CSS 视觉格式化模型（visual formatting model）是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一。

盒子类型由 display 决定，同时给一个元素设置 display 后，将会决定这个盒子的 2 个显示类型（display type）：

• outer display type（对外显示）：决定了该元素本身是如何布局的，即参与何种格式化上下文；
• inner display type（对内显示）：其实就相当于把该元素当成了容器，规定了其内部子元素是如何布局的，参与何种格式化上下文；

outer display type

对外显示方面，盒子类型可以分成 2 类：

block-level box（块级盒子） 和 inline-level box（行内级盒子）

• 块级盒子：display 为 block、list-item、table、flex、grid、flow-root 等；
• 行内级盒子：display 为 inline、inline-block、inline-table 等；

所有块级盒子都会参与 BFC，呈现垂直排列；而所有行内级盒子都参会 IFC，呈现水平排列

块级元素

address联系方式信息。article 文章内容。aside 伴随内容。blockquote块引用。dd定义列表中定义条目描述。div文档分区。dl定义列表。fieldset表单元素分组。figcaption 图文信息组标题figure 图文信息组 (参照 figcaption)。footer 区段尾或页尾。form表单。h1, h2, h3, h4, h5, h6标题级别 1-6.header 区段头或页头。hgroup 标题组。hr水平分割线。ol有序列表。p行。pre预格式化文本。section 一个页面区段。table表格。ul

无序列表。

行内元素

• b, big, i, small, tt
• abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
• a, bdo, br, img, map, object, q, script, span, sub, sup
• button, input, label, select, textarea

inner display type

对内方面，其实就是把元素当成了容器，里面包裹着文本或者其他子元素。container box 的类型依据 display 的值不同，分为 4 种：

• block container：建立 BFC 或者 IFC；
• flex container：建立 FFC；
• grid container：建立 GFC;
• ruby container：接触不多，不做介绍。

值得一提的是如果把 img 这种替换元素（replaced element）申明为 block 是不会产生 container box 的，因为替换元素比如 img 设计的初衷就仅仅是通过 src 把内容替换成图片，完全没考虑过会把它当成容器。