那些不曾了解的CSS——03

视觉格式化模型(visual formatting model)

视觉格式化模型是用来处理文档显示时的计算规则。

生成盒子

首先会将元素转换成一个个盒子，相关的概念如下：

• 块(block)
  在文档流中占据一个独立的区域，块与块之间在垂直方向上一次堆叠
• 包含块(containing block)
  包含其他盒子的块称为包含块
• 盒子(box)
  根据文档内容所创建的，主要用于文档元素的定位、布局和格式化等。盒子与元素并不是一一对应的，有时多个元素回合并成一个盒子，也有一个元素会产生多个盒子（匿名盒子）
• 块级元素(block-level element)
  display属性为block、list-item、table时，该元素称为块级元素。元素是否是块级元素仅仅是元素本身的属性，并不直接用于格式化上下文的创建或者布局
• 块级盒子(block-level box)
  由块元素生成。一个块元素至少会产生一个块级盒子
• 块容器盒子(block container box)
  侧重于当前盒子作为“容器”，不参与当前块的布局和定位，仅仅描述当前盒子与其后代之间的关系，确定子元素的定位、布局等。要么只包含其它块级盒子，要么只包含行内盒子并同时创建一个行内格式化上下文
• 块盒子(block box)
  如果一个盒子既是块级盒子也是块容器盒子，则称为块盒子
• 行内级元素(inline-level element)
  display属性为inline、inline-block、inline-table的元素
• 行内级盒子(inline-level box)
  由行内级元素生成
• 行内盒子(inline box)
  参与行内格式化上下文创建的行内级盒子
• 原子行内级盒子(atomic inline-level box)
  不参与行内格式化上下文创建的行内级盒子

定位

• 普通流
• 浮动
• 绝对定位
  盒子模型(box model)
  布局模式
  格式化上下文(Formatting Context, FC)
• 块格式化上下文
• 行内格式化上下文