什么是视觉盒模型？

大部分 Web 开发者都知道，在 CSS 的世界中，每一个元素都会被视为一个盒子，同时对 CSS 的盒模型较为熟悉，但很多人会对于视觉盒模型感到很陌生。孰不知，视觉盒模型 也是 CSS 中的一个非常重要的基础概念。

简单地说，视觉盒模型也被称为视觉格式化模型，它会根据 CSS 盒模型将 HTML 文档中的元素转换为一个个盒子。它会根据盒子的包含块（Container Block）的边界来渲染盒子。其实，它也是我们常说的格式化上下文（Formatting Context），比如大家常听到的 BFC、IFC 等。

如此一来，在 CSS 中任何一个盒子就有了两种模型，其中一个是盒模型（Box Model） ，另一个就是视觉盒模型（Visual Formatting Model） 。它们有着明确的分工：

• 盒模型 ：主要用来计算盒子大小的，它主要包括了 CSS 的 width 、height 、border 、padding 和 margin；
• 视觉盒模型 ：主要用来计算盒子位置，即用于布局。它主要由盒子的尺寸、盒子的类型、定位方案、文档树中的其它元素、浏览器视窗尺寸与位置、所包含的图片尺寸、其他的某些外部因素来决定。

如何改变视觉盒模型的格式？

在 CSS 中，我们可以通过 display 属性来手动调整盒子类型（视觉盒模型）。CSS 的 display 属性提供了多个不同类型的值

如何选择

1. 根据文档流方式选择 block,inline
2. 更具布局方式选择 flow,flow-root,flex,grid,table
3. 可选项 list-item

然后根据 UI 形式，从第一列中选择相应文档流方式，可以是 block 或是 inline ；然后从第二列中选择布局方案，如果选择使用 CSS Flexbox 布局，则选择 flex ；如果选择使用 CSS Grid 布局，则选择 grid；如果 UI 是一个列表（可能带有标记符），则选择第三列中的 list-item 。

总结

虽然在 Web 开发中，并没有明确的条文或规则要求我们根据 UI 呈现形式来选择合适的视觉盒模型。但在 CSS 中，视觉盒模型直接决定了 HTML 元素会生成一个什么类型的盒子，并且 CSS 视觉盒模型会直接影响 Web 布局。

正如文章中所示，如果你在开发的过程中，没有根据 UI 呈现形式选择合适的视觉盒模型，会让你的 CSS 代码变得更冗余，从而增加了编写和维护 CSS 代码的成本。

在此，强烈建议大家在还原 UI 界面时，首先根据 UI 界面中的对象选择更为合理（具有语义化）的 HTML 标签元素；同时也应该根据 UI 界面呈现形式选择合理的视觉盒模型，即给元素的 display 属性设置合适的值。在正确的地方选择正确方法，才能实现正确的效果。