CSS中视觉格式化模型是什么

这篇文章主要讲解了“CSS中视觉格式化模型是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS中视觉格式化模型是什么”吧！

成都创新互联公司是由多位在大型网络公司、广告设计公司的优秀设计人员和策划人员组成的一个具有丰富经验的团队，其中包括网站策划、网页美工、网站程序员、网页设计师、平面广告设计师、网络营销人员及形象策划。承接：成都做网站、成都网站制作、成都外贸网站建设、网站改版、网页设计制作、网站建设与维护、网络推广、数据库开发,以高性价比制作企业网站、行业门户平台等全方位的服务。

CSS视觉格式化模型（visualformattingmodel）是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是CSS的基础概念之一。

视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子，每个盒子的布局由以下因素决定：

盒子的尺寸：精确指定、由约束条件指定或没有指定

盒子的类型：行内盒子（inline）、行内级盒子（inline-level）、原子行内级盒子（atomic

inline-level）、块盒子（block）

定位方案（positioningscheme）：普通流定位、浮动定位或绝对定位

文档树中的其它元素：即当前盒子的子元素或兄弟元素

视口尺寸与位置

所包含的图片的尺寸

其他的某些外部因素

该模型会根据盒子的包含块（containingblock）的边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不由包含块所限制，当盒子的布局跑到包含块的外面时称为溢出（overflow）

盒子生成介绍

盒子的生成是CSS视觉格式化模型的一部分，用于从文档元素生成盒子。盒子有不同的类型，不同类型的盒子的格式化方法也有所不同。盒子的类型取决于CSS的display属性。

块级元素与块盒子

当元素的display为block、list-item或table时，该元素将成为块级元素。一个块级元素会被格式化成一个块（例如文章的一个段落），默认按照垂直方向依次排列。

每个块级盒子都会参与块格式化上下文（blockformattingcontext）的创建，而每个块级元素都会至少生成一个块级盒子，即主块级盒子（principalblock-levelbox）。有一些元素，比如列表项会生成额外的盒子来放置项目符号，而那些会生成列表项的元素可能会生成更多的盒子。不过，多数元素只生成一个主块级盒子。

主块级盒子包含由后代元素生成的盒子以及内容，同时它也会参与定位方案。

一个块级盒子可能也是一个块容器盒子。块容器盒子（blockcontainerbox）要么只包含其它块级盒子，要么只包含行内盒子并同时创建一个行内格式化上下文（inlineformattingcontext）。

能够注意到块级盒子与块容器盒子是不同的这一点很重要。前者描述了元素与其父元素和兄弟元素之间的行为，而后者描述了元素跟其后代之间的行为。有些块级盒子并不是块容器盒子，比如表格；而有些块容器盒子也不是块级盒子，比如非替换行内块和非替换表格单元格。

一个同时是块容器盒子的块级盒子称为块盒子（blockbox）。

匿名块盒子

在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能用CSS选择符选中，因此称为匿名盒子（anonymousboxes）。

CSS选择器不能作用于匿名盒子(anonymousboxes)，所以它不能被样式表赋予样式。也就是说，此时所有可继承的CSS属性值都为inherit，而所有不可继承的CSS属性值都为initial。

块包含盒子可能只包含行内级盒子，也可能只包含块级盒子，但通常的文档都会同时包含两者，在这种情况下，就会在相邻的行内级盒子外创建匿名块盒子。

示例节

考虑下面的HTML代码，假设和都保持默认的样式（即它们的display为block）：

此时会产生两个匿名块盒子：一个是元素前面的那些文本（Someinlinetext），另一个是元素后面的文本（followedbymoreinlinetext.）。此时会生成下面的块结构：

2976188203-5c28f59186cda_articlex.png

显示为：

Someinlinetext

followedbyaparagraph

followedbymoreinlinetext.

对这两个匿名盒子来说，程序员无法像

元素那样控制它们的样式，因此它们会从

那里继承那些可继承的属性，如color。其他不可继承的属性则会设置为initial，比如，因为没有为它们指定background-color，因此其具有默认的透明背景，而元素的盒子则能够用CSS指定背景颜色。类似地，两个匿名盒子的文本颜色总是一样的。

另一种会创建匿名块盒子的情况是一个行内盒子中包含一或多个块盒子。此时，包含块盒子的盒子会拆分为两个行内盒子，分别位于块盒子的前面和后面。块盒子前面的所有行内盒子会被一个匿名块盒子包裹，块盒子后面的行内盒子也是一样。因此，块盒子将成为这两个匿名块盒子的兄弟盒子。

如果有多个块盒子，而它们中间又没有行内元素，则会在这些盒子的前面和后面创建两个匿名块盒子。

行内级元素和行内盒子节

如果一个元素的display属性为inline、inline-block或inline-table，则称该元素为行内级元素。显示时，它不会生成内容块，但是可以与其他行内级内容一起显示为多行。一个典型的例子是包含多种格式内容（如强调文本、图片等）的段落，就可以由行内级元素组成。

行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文（inlineformattingcontext）的创建。行内盒子既是行内级盒子，也是一个其内容会参与创建其容器的行内格式化上下文的盒子，比如所有具有display:inline样式的非替换盒子。如果一个行内级盒子的内容不参与行内格式化上下文的创建，则称其为原子行内级盒子。而通过替换行内级元素或display值为inline-block或inline-table的元素创建的盒子不会像行内盒子一样可以被拆分为多个盒子。

注意：开始的时候，原子行内级盒子叫做原子行内盒子，这并不准确，因为它们并不是行内盒子。后来在一次勘误时修正了这一问题。不过，当你见到某些文章中使用了“原子行内盒子”的时候，你尽可以将其理解为“原子行内级盒子”，因为这仅仅是一个名字的修改。

在同一个行内格式化上下文中，原子行内级盒子不能拆分成多行：

Thetextinthespan

canbesplitinseverallinesasit

isaninlinebox.