元素与盒

在 HTML 中常常使用的概念是元素，而在 CSS 中，布局的基本单位是盒，盒总是矩形的。

元素与盒并非一一对应的关系，一个元素可能生成多个盒，CSS 规则中的伪元素也可能生成盒，display 属性为 none 的元素则不生成盒。

除了元素之外，HTML 中的文本节点也可能会生成盒。

盒模型

一个盒包括了内容 (content)、边框 (border)、内边距 (padding)、外边距 (margin)。下图展示了盒模型的直观意义：

盒的尺寸（width 与 height）定义受到 box-sizing 属性的影响。box-sizing 可选择 content-box(默认), padding-box 和 border-box 三种模式。

正常流

正常流是页面，大部分盒排布于正常流中。正常流中的盒必定位于某一格式化上下文中，正常流中有两种格式化上下文：块级格式化上下文（block formatting context，简称 BFC）和行内格式化上下文（inline formatting context,IFC）。

在块级格式化上下文中，盒呈纵向排布，在行内格式化上下文中，盒则呈横向排布。

正常流根容器中是块级格式化上下文，不同的盒可能会在内部产生行内格式化上下文或者块级格式化上下文。

块级与行内级

正常流中的盒分为块级与行内级两种，任何一个行内级盒都不能够直接被放入块级格式化上下文中。如果有一个 HTML 元素生成了一个行内盒，而其所在的上下文是块级的话，那么应当为它生成一个匿名块级盒，匿名块级盒会在内部生成行内格式化上下文。

元素的 display 属性会决定盒是行内级还是块级：

• block, table, flex, grid, list-item 为块级
• inline, inline-block, inline-table, inline-flex, inline-grid 为行内级

格式化上下文

display 同时还可能决定元素内部如何显示，一些容器型元素生成的盒会产生 BFC 和 IFC 以外的格式化上下文。

有一类盒被称为块容器，它们能够包含块级盒。块容器要么创建块级格式化上下文，这样它内部仅仅包含块级盒，要么创建一个行内格式化上下文，这样它内部仅仅包含行内级元素。（也就是说，块容器中不可能既包含块级盒，又包含行内级盒，一旦他的子盒中有块级盒，所有行内级盒都会被自动创建匿名盒包裹）。

在非块级格式化上下文中的块容器总是会创建新的块级格式化上下文：如 display 为 inline-blocks, table-cells, 和 table-captions 所生成的盒。而自身也在块级格式化上下文中的块容器，则只有 overflow 不为 visible 的情形下才会创建新的块级格式化上下文。

绝对定位和浮动的块容器则总是会创建新的块级格式化上下文。

display 值为 table 或者 inline-table 的元素将会生成表格（table），表格内部会使用特殊的格式化方式来排布其内部元素。

display 值为 grid 或者 inline-grid 的元素将会生成格元素（grid element），与 table 情形类似，它内部也是使用特殊的格式化方式来牌不其内部元素，

display 值为 flex 或者 inline-flex 的元素将会生成自适应容器（flex container），自适应容器在其内部产生自适应格式化上下文（flex formatting context）。