本文已参与「新人创作礼」活动，一起开启掘金创作之路。
视觉格式化模型
视觉格式化模型（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，呈现水平排列。
除此之外，block、inline 和 inline-block 还有什么更具体的区别呢？
1.block
- 占满一行，默认继承父元素的宽度；多个块元素将从上到下进行排列；
- 设置 width/height 将会生效；
- 设置 padding 和 margin 将会生效；
2.inline
- 不会占满一行，宽度随着内容而变化；多个 inline 元素将按照从左到右的顺序在一行里排列显示，如果一行显示不下，则自动换行；
- 设置 width/height 将不会生效；
- 设置竖直方向上的 padding 和 margin 将不会生效（可经过写代码验证发现，padding的竖直方向上设置值，看起来好像padding-bottom生效了！）；
padding-bottom看起来好像有效，但是仔细观察就会发现它并没有撑开盒子。下面是从网上找到的解释：
While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content. In the example below, 50px of padding has been applied to all sides of the element. As you can see, it has an affect on the content on each side, but not on content above or below
这段话基本解释了上述现象，当我们使用内边距时，只有左右方向有效；当我们设置四个方向的内边距时，对于该行内元素，确实显示出效果，但是竖直方向的内边距只有效果，对其他元素无任何影响。
因此，行内元素的padding-top，padding-bottom和margin-top,margin-bottom是真的是无效；不过要注意一点，对于竖直方向的内边距该行内元素的内容范围是增大了，不过只是表象，对周围元素无任何影响。
- 特别要注意，img是一个特例，它虽然是行内元素，但它的性质不同于行内元素。对于img设置padding和margin都是有效的。
3.inline-block
- 是行内块元素，不单独占满一行，可以看成是能够在一行里进行左右排列的块元素；
- 设置 width/height 将会生效；
- 设置 padding 和 margin 将会生效；
- 可以看作是有block属性的inline元素（既能在一行内显示，又有块元素的width，height，margin，padding属性）
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 把内容替换成图片，完全没考虑过会把它当成容器。
number 1
