CSS 视觉格式

可视化格式化模型通常解释如何处理文档树中的元素以用于诸如计算机屏幕之类的可视媒体。

CSS 视觉格式模型

CSS 可视化格式化模型是用于处理可视媒体的文档的算法。在可视化格式化模型中,文档树中的每个元素根据框模型生成零个或多个框。

这些盒子的布局取决于以下因素:

  • 盒子尺寸。
  • 元素的类型(块或内联)。
  • 定位方案(正常流,浮动绝对定位)。
  • 文档树中元素之间的关系。
  • 外部信息,例如视区大小,图像的内置尺寸等。

注意: 文档树是源文档中编码的元素的层次结构。文档树中的每个元素都只有一个父元素,但根元素除外,它没有。

CSS 中生成的框的类型

网页上显示的每个元素都会生成一个矩形框。以下部分描述了元素可能生成的框的类型。

块级元素和块盒

块级元素是可视化为块的元素(即占据可用的全宽),在元素之前和之后使用换行符。例如,段落元素( <p>),标题(<h1> to <h6>),分区(<div>)等。

通常,块级元素可以包含内联元素和其他块级元素。

内联级元素和内联框

内联级元素是源文档中不构成新内容块的元素; 内容按行分发。例如,段落(<em>),spans(<span>),加重元素(<strong>)等中强调的文本片段。

内联元素通常只包含文本和其他内联元素。

注意: 与块级元素不同,内联级元素仅占用所需的宽度,并且不会强制换行。

你可以使用 CSS 显示属性更改元素在网页上的显示方式。你将在下一章中了解显示属性。