0
点赞
收藏
分享

微信扫一扫

那些不曾了解的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)
  • 块格式化上下文
  • 行内格式化上下文
举报

相关推荐

0 条评论