CSS 视觉格式模型

视觉格式模型通常说明如何为诸如计算机屏幕之类的视觉媒体处理文档树中的元素。

CSS视觉格式模型

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

这些框的布局取决于以下因素：

• 盒子尺寸。

• 元素的类型（块或内联）。

• 定位方案（正常流量，浮动和绝对定位）。

• 文档树中元素之间的关系。

• 外部信息，例如视口大小，图像的内置尺寸等。

CSS中生成的框的类型

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

块级元素和块框

块级元素是那些以视觉方式格式化为块的元素（即占用可用的全部宽度），并且在元素之前和之后都有换行符。例如，段落元素（<p>），标题（<h1> - <h6>），分隔（<div>）等。

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

内联级元素和内联框

内联级元素是源文档中不构成新内容块的那些元素；内容按行分布。例如，段落（<em>），跨度（<span>），强元素（<strong>）等内的强调文本。

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

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