Introduction to the visual formatting model

原文:https://www.w3.org/TR/CSS2/visuren.html#block-formatting

---------------------------------------

This chapter and the next describe the visual formatting model: how user agents process the document tree for visual media.

In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by:

The properties defined in this chapter and the next apply to both continuous media and paged media. However, the meanings of the margin properties vary when applied to paged media (see the page model for details).

The visual formatting model does not specify all aspects of formatting (e.g., it does not specify a letter-spacing algorithm). Conforming user agents may behave differently for those formatting issues not covered by this specification.

9.1.1 The viewport

User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users consult a document. User agents may change the document‘s layout when the viewport is resized (see the initial containing block).

When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent should offer a scrolling mechanism. There is at most one viewport per canvas, but user agents may render to more than one canvas (i.e., provide different views of the same document).

9.1.2 Containing blocks

In CSS 2.1, many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block. In general, generated boxes act as containing blocks for descendant boxes; we say that a box "establishes" the containing block for its descendants. The phrase "a box‘s containing block" means "the containing block in which the box lives," not the one it generates.

Each box is given a position with respect to its containing block, but it is not confined by this containing block; it may overflow.

The details of how a containing block‘s dimensions are calculated are described in the next chapter.

9.2 Controlling box generation

The following sections describe the types of boxes that may be generated in CSS 2.1. A box‘s type affects, in part, its behavior in the visual formatting model. The ‘display‘ property, described below, specifies a box‘s type.

9.2.1 Block-level elements and block boxes

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the ‘display‘ property make an element block-level: ‘block‘, ‘list-item‘, and ‘table‘.

Block-level boxes are boxes that participate in a block formatting context. Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme. Some block-level elements may generate additional boxes in addition to the principal box: ‘list-item‘ elements. These additional boxes are placed with respect to the principal box.

Except for table boxes, which are described in a later chapter, and replaced elements, a block-level box is also a block container box. A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes. Not all block container boxes are block-level boxes: non-replaced inline blocks and non-replaced table cells are block containers but not block-level boxes. Block-level boxes that are also block containers are called block boxes.

The three terms "block-level box," "block container box," and "block box" are sometimes abbreviated as "block" where unambiguous.

9.2.1.1 Anonymous block boxes

In a document like this:


<DIV>
  Some text
  <P>More text
</DIV>

(and assuming the DIV and the P both have ‘display: block‘), the DIV appears to have both inline content and block content. To make it easier to define the formatting, we assume that there is an anonymous block box around "Some text".

   [D]

Diagram showing the three boxes, of which one is anonymous, for the example above.

In other words: if a block container box (such as that generated for the DIV above) has a block-level box inside it (such as the P above), then we force it to have only block-level boxes inside it.

When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.

This model would apply in the following example if the following rules:


p    { display: inline }
span { display: block }

were used with this HTML document:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
<TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
<BODY>
<P>
This is anonymous text before the SPAN.
<SPAN>This is the content of SPAN.</SPAN>
This is anonymous text after the SPAN.
</P>
</BODY>

The P element contains a chunk (C1) of anonymous text followed by a block-level element followed by another chunk (C2) of anonymous text. The resulting boxes would be a block box representing the BODY, containing an anonymous block box around C1, the SPAN block box, and another anonymous block box around C2.

The properties of anonymous boxes are inherited from the enclosing non-anonymous box (e.g., in the example just below the subsection heading "Anonymous block boxes", the one for DIV). Non-inherited properties have their initial value. For example, the font of the anonymous box is inherited from the DIV, but the margins will be 0.

Properties set on elements that cause anonymous block boxes to be generated still apply to the boxes and content of that element. For example, if a border had been set on the P element in the above example, the border would be drawn around C1 (open at the end of the line) and C2 (open at the start of the line).

Some user agents have implemented borders on inlines containing blocks in other ways, e.g., by wrapping such nested blocks inside "anonymous line boxes" and thus drawing inline borders around such boxes. As CSS1 and CSS2 did not define this behavior, CSS1-only and CSS2-only user agents may implement this alternative model and still claim conformance to this part of CSS 2.1. This does not apply to UAs developed after this specification was released.

Anonymous block boxes are ignored when resolving percentage values that would refer to it: the closest non-anonymous ancestor box is used instead. For example, if the child of the anonymous block box inside the DIV above needs to know the height of its containing block to resolve a percentage height, then it will use the height of the containing block formed by the DIV, not of the anonymous block box.

9.2.2 Inline-level elements and inline boxes

原文地址:https://www.cnblogs.com/oxspirt/p/10401056.html

时间: 2024-10-06 20:49:09

Introduction to the visual formatting model的相关文章

可视化格式模型(visual formatting model)系列

俗话说得好,万丈高楼平地起.在前端各种框架和工具层出不穷的今天,研究css标准.js的基础特性这些并不是浪费时间,相反打好了基础,才能更好的去拥抱变化. 这个东西呢,是准备当做一个系列来写,主要参考官方的标准和前辈们的一些归纳总结,不是全盘翻译,只是一个知识的梳理,查漏补缺.这个系列主要还是理论概念,我会尽量通过demo和自己平时遇到的一些具体问题来结合说明.这个系列呢,初步的考虑是以下几篇组成: 1.可视化格式模型(visual formatting model): 2.控制包含框的生成(Co

可视化格式模型(visual formatting model)

对于可视化格式模型这个概念,官方的原话是这样的:How use agents process the document tree for visual media.翻译过来就是用户端在媒介中如何处理文档树.用户端这个对于我们来说通常指的就是浏览器.媒介呢,就是展示页面的介质,比如显示器.文档树呢,就是源文档中元素树的编码.树中,每一个元素恰好有一个父元素,当然除了根元素. 一.框的布局影响因素 可视化格式模型中,每一个文档树中得元素都会根据box module(盒模型)来产生零个或多个控制框.这

CSS篇 Visual Formatting Model翻译

解释: 1. 可替换元素 可替换元素是一种其展现不在CSS限制范围的元素,也就是说:它的展现独立于CSS.典型的可替换元素有: 1. <img>, <object>, <video>, 2. 表单元素:<textarea>, <input>. 3. 有些元素在特定情况下才属于可替换元素,如:<audio>, <canvas>. 4. 使用CSS属性content插入的内容称为匿名可替换元素. 这类元素的典型特点是:没有结束

详说 Block Formatting Contexts (块级格式化上下文)

在上文<详说清除浮动>中,Kayo 较为详细地介绍了 BFC ,也就是本文的主角 Block Formatting Contexts (块级格式化上下文),本文会基于上文关于 BFC 的部分进行拓展,进一步说明 BFC 的特性. 但在进一步说明 BFC 特性之前,Kayo 首先要介绍另一个在 CSS 的可视化格式模型 (Visual Formatting Model) 中具有非常重要地位的概念——定位方案.定位方案是控制元素的布局,在 CSS 2.1 中,有三种定位方案——普通流 (Norma

关于块级格式化上下文(Block formatting context)

不是谁都像你一样只向着前方就能活下去了,你就抛弃那些没用的同伴前行就好了,你注定是要成为海贼王的男人吧,而我就算没有远大的目标也可以.——<one piece>     Block formatting context(以下简写为BFC)又称做块级格式化上下文,源自CSS2.1 规范中的Visual formatting model,Visual fomatting model定义了视觉媒体该怎样处理文档内容,BFC属于Normal flow(正常流),它与其他正常流元素并没有本质的区别,BF

broswer

Web browsers are probably the most widely used software. In this book I will explain how they work behind the scenes. We will see what happens when you type 'google.com' in the address bar until you see the Google page on the browser screen. The brow

CSS 3 学习——transform 3D转换渲染

以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其他元素也共享这个平面.2D变换函数虽然能改变元素的表现,但是这个被改变的元素仍然是在其包含块所处的平面内被渲染. 3D变换会产生一个变换矩阵,该变换矩阵在Z轴上的分量不为0.结果是把元素渲染到一个不同于其包含块所处的平面内.这将影响到通常情况下的"后来居上"的渲染规则:变换元素可能会和其相

position&amp;containing block

一.包含块(Containing Block) 要讲position,首先就涉及到一个概念:包含块. 1.包含块介绍 包含块简单理解就是一个定位参考块,就是大盒子里套小盒子中那个大盒子.元素有positon属性就必然涉及到包含块.先简单总结一下. 1.初始包含块(Initial containing block),即根元素的包含框. 在浏览器中是原点与 canvas 原点重合.大小与 viewport 相同的矩形. 2.position:static|relative元素包含块为最近的块级[bl

CSS 设计指南3 读后感

HTML标记与文档结构 块状元素.行内元素.样式元素.结构化标签.盒模型.文档对象模型? 块状元素 div,p,h1-h6,address,ol,ul,pre,table,fieldset,legend,header,footer,nav,section,article,aside ? 行内元素 a ,img,span,input,label,select,abbr,I,big,small,em,bold,strong ? 样式元素 Center,font,basefont,s,strike,u