Visual format models (visual formatting model)

The official quote for the concept of a visual format model is this: how to use agents process the document tree for visual media. Translating is how the client handles the document tree in the media. Client This is what we usually refer to as browsers. Media is the media that displays the page, such as a display. The document tree is the encoding of the element tree in the source document. In the tree, each element has exactly one parent element, except the root element, of course.

I. Layout of the box influence factors

In a visual format model, the elements in each document tree produce 0 or more control boxes based on the box module (box model). The layout of these boxes is controlled by the following contents:

• Size and type of box
• Positioning system (including normal flow, floats and absolute positioning)
• Relationships between elements in the document tree
• External information (such as the size of the view, the internal dimensions of the graphic, etc.)

1. Size and type of box

The type of the box refers to the element type determined by the Dispaly attribute, which causes the element to produce the corresponding control box.

2. Positioning System

It is mainly conventional flow, floating and absolute positioning.

3. Relationships between elements in the document tree

For example, two floating elements that are sibling nodes, the preceding floating elements affect the layout of the trailing elements.

4. External information

such as adaptive pages, the size of the window has an impact on the layout. The intrinsic size of the picture affects the size of the replacement element in the row.

Two. View

Viewport, I translated the view here, also called the viewpoint, the viewport, in fact, it is the window.

When the size of the visible window changes, the browser should change the layout of the document. For example, some values depend on the size of the visible window, the "auto" value of the DIV ' width ', and so on.

The browser should provide a scrolling mechanism when the size of the viewable window is smaller than the size of the document rendered canvas (that is, the page). Each canvas has a maximum of one visual window. However, the browser can render multiple canvases at the same time.

three. Include Block

In CSS2, the position and size of many boxes are calculated based on the four sides of a rectangular box called a containing block . Typically, the generated box behaves as a containing block of its derived box; we say a box "builds" the containing block of its derived box. The phrase "a box contains a block" means "the box contains the containing block" instead of the block it generates.

　　

Based on the box's containing block, each box has a position, but it is not limited by the containing block; it may overflow.

The root of the document tree generates a box that is the initial containing block for subsequent layouts.

The width of the initial containing block can be specified by the root element's wide property. If the property has a value of ' auto ', the client provides the initial width (for example, the current width of the client using the view).

The height of the initial containing block can be specified by the root element's height property. If the property has a value of ' auto ', the height of the containing block is adjusted to fit the contents of the document.

The initial containment block cannot be positioned or floated (that is, the client ignores the position and float properties of the root element).

A description of the details that contains how the block size is calculated is mentioned later.

Four. Summary

Visual format model This article is mainly a few basic concepts, let us understand what is the visual format model, followed by detailed analysis of the visual format model in the core of the concept.

Resources:

1. Visualize the format model. Http://kaix.in/daddy/old/very/css/visuren.html

2.http://www.w3.org/tr/css2/visuren.html

3.http://w3help.org/zh-cn/kb/007/

Visual format models (visual formatting model)