css可视格式化模型 – CSS高级教程

上一章CSS高级教程请查看：css属性单位

可视化格式模型通常解释文档树中的元素是如何处理计算机屏幕等可视化媒体的。

CSS可视化格式化模型

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

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

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

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

在CSS中生成的框的类型

web页面上显示的每个元素都生成一个矩形框。下一节描述元素可能生成的框的类型。

块级元素和块框

块级元素是那些以块的形式进行可视化格式化的元素(即占用可用的全部宽度)，在元素之前和之后都有一个换行符。例如，段落元素(<p>)，标题(<h1>到<h6>)，div(<div>)等。

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

内联级元素和内联框

内联元素是源文档中不构成新内容块的元素;内容以行形式分布。例如，段落中强调的段落(<em>)、span (<span>)、strong元素(<strong>)等。

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

注意：与块级元素不同，内联级元素只占用必要的宽度，并不强制换行。

可以使用CSS display属性更改元素在web页面上的显示方式，我们将在下一章了解display属性。