CSS2.1规范笔记——9.1 视觉格式化模型(视口和包含块)

发布时间 2023-07-22 19:28:27作者: hdxg

视觉格式化模型

视觉格式化模型:对于可视化媒体,用户代理怎样处理文档树。在视觉格式化模型中,文档树中的每个元素根据其盒模型生成0或多个盒。这些盒的布局由以下因素控制:

  • 盒尺寸与类型
  • 定位方案(常规流、浮动与绝对定位)
  • 文档树中元素间的关系
  • 外部信息(例如视口大小、图片的固有尺寸等)

本章及下一章中定义的属性适用于连续媒体和分页媒体。但margin属性应用于分页媒体时有不同的含义(详细信息查看页模型)。

视觉格式化模型并没有指定格式化的所有方面(例如,它没有指定字母间距算法)。(与CSS规范)一致的用户代理在这些本规范未提及的格式化问题上的表现可能存在差异。

视口viewport

规范中的定义:

连续媒体的用户代理一般会给用户提供一个视口(屏幕上的一个窗口或者视图区域),用户通过它来查阅文档。视口尺寸变化时,用户代理可能会改变文档的布局。

当视口比渲染文档的画布区域小时,用户代理应该提供一种滚动机制。一个画布最多对应一个视口,但用户代理可能会渲染到多个画布上,即提供同一文档的不同视图。

 

浏览器的渲染区域就是一个视口。

包含块containing block

规范中的定义:

元素(生成的)盒的位置和大小有时候是根据一个特定矩形计算的,一般把生成的盒作为后代盒的包含块,我们说一个盒为其后代“建立”了包含块。“一个盒的包含块”表示“盒所在的包含块”,而不是它生成的包含块。

 

MDN中的定义:

一个元素的尺寸和位置经常受其包含块(containing block)的影响。大多数情况下,包含块就是这个元素最近的祖先块元素的内容区,但也不是总是这样。

 

包含块很重要,因为它影响着CSS中两个关键问题:定位和尺寸。

包含块一般是最近祖先元素的content box,但也不总是这样。

具体包含块的定义见10.1