CSS规范>9视觉格式化模型VisualFormattingModel_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS规范>9视觉格式化模型VisualFormattingModel_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3934字，纯文字阅读大概需要6分钟。
内容图文
视觉格式化模型 Visual Formatting Model URL：http://www.w3.org/TR/CSS2/visuren.html
Translator: HaoyCn
Date: 10th of Aug, 2015
本文并未全部翻译，译者在原文基础上稍有添加图示。如了解全部信息，请参看规范原版。个人水平有限，欢迎指正。
9.1 视觉格式化模型介绍
本章和下章用于描述视觉格式化模型：用户代理 User Agent如何在视觉媒体 Visual Media 下处理文档树 Document Tree。
视觉格式化模型中，文档树中的每一个元素根据盒模型 Box Model 产生零个或多个盒。这些盒的布局由以下内容控制：
盒的尺寸和类型
定位体系 Positioning Scheme（常规流，浮动和绝对定位）
文档树中元素之间的关系
外部信息（如：视口大小，图片的固有尺寸等）
本章及下章定义的属性适用于连续媒体和页面媒体 Paged Media。然而，外边距属性的意义在页面媒体中有所不同（详情见页面模型）。
视觉格式化模型没有指定格式化的所有方面（如，没有指定字符间距算法）。本规范没有覆盖到的格式化问题上，符合规范的用户代理也可能表现不一。
9.1.1 视口 The Viewport
在连续媒体 Continuous Media 上工作的用户代理一般会向用户提供一个视口（屏幕上的一个窗口或其它可视区域）来帮助用户访问文档。用户代理可以在调整视口大小的同时改变文档的布局（见初始包含块 Initial Containing Block）。
如果视口小于渲染文档的画布区域，用户代理应提供一个滚动机制。每个画布最多有一个视口，但用户代理可以把文档渲染到多个画布上（即为相同文档提供不同视图）。
9.1.2 包含块 Containing Blocks
CSS2.1中，许多盒的定位和大小都根据一个名为包含块 Containing Block 的矩形盒的边缘来计算。一般地，生成的盒会充当其后代盒的包含块；我们称盒为其后代“创建”了包含块。说“盒的包含块”即是说“盒所处的包含块”，而不是盒所产生的包含块。
每个盒会被赋予一个相对于其包含块的位置，但它不会被局限在其包含块内；它有可能溢出。
包含块的尺寸如何计算的细节将在下章讲述。
9.2 盒的生成 Controlling Box Generation
本节描述CSS2.1中可生成的盒类型。盒的类型会影响其在视觉格式化模型中的表现。下面描述的 display 属性用来指定盒的类型。
9.2.1 块级元素 Block-level Elements 和 块盒 Block Boxes
块级元素是源文档中会被视觉格式化为块状（例：段落）的元素。display 属性的以下值会让一个元素成为块级元素：block、list-item以及table。
块级盒Block-level Boxes是参与块格式化上下文 Block Formatting Context 的盒。每个块级元素生成一个主要的块级盒 Principal Block-level Box 来包含其后代盒和生成的内容，同时参与定位体系 Positioning Scheme。某些块级元素还会在主要盒之外产生额外的盒：list-item 元素。这些额外的盒会相对于主要盒来摆放。
除了（下章要讲的）表格盒 Table Boxes，和可替换元素（Replaced Elements），一个块级盒同时也是一个块容器盒 Block Container Box，一个块容器盒要么只包含块级盒，要么创建一个行内格式化上下文 Inline Formatting Context 并只包含行内级盒 Inline-level Boxes。并非所有的块容器盒都是块级盒：不可替换的行内块 Bon-replaced Inline Blocks 和不可替换的表格单元格 Non-replaced Table Cells 也是块容器但不是块级盒。是块级盒、同时也是块容器的盒称作块盒 Block Boxes。
这三个术语，“块级盒”、“块容器盒”、“块盒”在意义明确时可简称为“块”。
9.2.1.1 匿名块盒在一个如下文档中：
Some text
More text
（假定 div 和 p 都设置了 display: block，）div 看起来似乎同时包含了行内类型的内容和块类型的内容。为了使界定格式化简单一些，我们假定有一个匿名块盒 Anonymous Block Box 围绕在“Some text”周围。
该例如图所示，有三个盒，其中一个为匿名盒。
换句话说：如果一个块容器盒（如上例中为 div 生成的盒）内有一个块级盒（如上例中的 p），那么我们强制它只包含块级盒。
当一个行内盒 inline box 包含一个文档流内 In-flow 的块级盒，这个行内盒（及在同一行盒的 Line Box 它的行内祖先）会在该块级盒（及其连续的或者中间只被可折叠空白、脱离文档流元素分隔的块级同胞）的周围打断，把行内盒分离成两个盒（甚至一边为空也如此），各在块级盒一边。在打断之前和打断之后的行盒 Line Box 都被匿名块盒包含，并且该块级盒成为匿名块盒的同胞。当这样的行内盒受到相对定位影响，任何产生的移动同样影响到包含在其中的块级盒。
该模型将应用在下面的例子中。假设有规则如下:
{ display: inline }
span { display: block }
被应用到如下HTML文档:
This is anonymous text before the SPAN。
This is the content of SPAN.
This is anonymous text after the SPAN。
内容总结
以上是互联网集市为您收集整理的CSS规范>9视觉格式化模型VisualFormattingModel_html/css_WEB-ITnose全部内容，希望文章能够帮你解决CSS规范>9视觉格式化模型VisualFormattingModel_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。