Shulou(Shulou.com)06/03 Report--

How to use CSS code to write visual formatting model, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

The CSS Visual formatting Model (visual formatting model) is a mechanism for processing documents and displaying them on visual media. This is a basic concept of CSS. The visual formatting model generates one or more boxes for each element of the document based on the CSS box model. The layout of each box consists of the following:

(1) Box size: explicitly specified, limited or unspecified

(2) Box type: inline (inline), inline level (inline-level), atomic inline level (atomic inline-level), block box

(3) Positioning scheme (positioning scheme): regular stream, floating or absolute positioning

(4) other elements in the tree: its offspring and contemporaries

(5) Dimensions and positions of viewports (viewport)

(6) the fixed size of the picture included

(7) other information.

A box is rendered relative to the boundary of its containing block (containing block). Usually a box creates an inclusion block for its descendant elements. Note that the box is not restricted by its containing block, and when its layout runs outside the containing block, it is called overflow.

Viewport Viewport

User agents that work on continuous media usually provide the user with a viewport (a window or other visual area on the screen) through which the user can access the document. The user agent can change the layout of the document when the viewport is resized (see the initial inclusion block for details).

If the viewport is smaller than the canvas area of the rendered document, the user agent should provide a scrolling mechanism. Each canvas can have up to one viewport, but user agents can render documents to multiple canvases (that is, provide different views for the same document).

Include block Containing blocks

In CSS 2.1the position and size of many boxes are calculated relative to the edge of a rectangular box called the containing block. The box generated for an element usually acts as the inclusion block of its descendant box; we call the box its descendant "establishes" the inclusion block. The inclusion block of the box represents the inclusion block in which the box is located, not the inclusion block it produces.

Each box is given a position relative to its containing block, but it is not limited to its containing block; it may overflow.

Generation of boxes (Box generation)

Part of the job of the CSS visual formatting model is to generate boxes from document elements. The generated boxes have different types and have an impact on the processing of the visual formatting model. The type of the generator box depends on the CSS property display

Block-level elements and block boxes (Block-level elements and block boxes)

When the CSS attribute display of an element is block, list-item, or table, it is a block-level element block-level. Block-level elements (such as

Visually appear as blocks, arranged vertically.

Block level box participation (block formatting context block formatting context). Each block-level element generates at least one block-level box, called the main block-level box (principal block-level box). Some elements, for example, generate additional boxes to place bullets, but most elements generate only one major block-level box.

The main block-level box will contain the boxes generated by the descendant elements and the generated content. It is also a box that can be used (location scheme positioning scheme).

Venn_blocks.png A block-level box may also be a block container box. The block container box (block container box) contains only other block-level boxes, or generates an inline formatting context (inline formatting context), thus containing only inline boxes. Note that the concept of block-level box is different from that of block container box. The former describes the performance between the element and its parent and sibling elements, while the latter describes the influence between the element and its descendants. Some block-level boxes, such as tables, are not block containers. In contrast, some block container boxes, such as non-replacement inline blocks and non-replacement table cells, are not block-level boxes.

The block boxes box which is also a block container box is called block box (block box).

Anonymous Block Box (Anonymous block boxes)

Sometimes you need to add complementary boxes, which are called anonymous boxes (anonymous boxes). They have no names and cannot be selected by the CSS selector.

Not being selected by the CSS selector means that you cannot add styles with stylesheets. This means that all inherited CSS attributes have a value of inherit and all non-inherited CSS attributes have a value of initial.

The block container box contains either inline boxes or block-level boxes only. But usually the document contains both. In this case, anonymous block boxes are created to contain adjacent inline-level boxes.

Take the following HTML code (vs.

Use the default property display:block)

XML/HTML Code copies content to the clipboard

Some inline text followed by a paragraph followed by more inline text.

Two anonymous block boxes will be created, one containing

The previous text (Some inline text), one that contains

The following text (followed by more inline text) is structured as follows:

Results:

The code is as follows:

Some inline text

Followed by a paragraph

Followed by more inline text.

And

With different elements, the developer cannot control the two anonymous boxes. For inheritable attributes, they will take the property value, such as color. For non-inherited attributes, the value is the initial value, for example, background-color is not specified, and the value is the initial value, that is, transparent, so the background is visible. And

You can specify background-color. Similarly, the two anonymous box texts are the same color.

Another situation where anonymous block boxes will be created is when an inline box contains one or more block boxes. In this case, the box containing the block box is split into two inline boxes and placed before and after the block box, and then contained by two anonymous block boxes. In this way, the block box forms a sibling relationship with two anonymous block boxes that contain in-line elements.

If the inline box contains multiple block boxes and there is no inclusion between the block boxes, anonymous block boxes are created before and after the block boxes.

Inline level elements and inline boxes (Inline-level elements and inline boxes)

When the element's CSS attribute display evaluates to inline, inline-block, or inline-table, it is called an inline-level element. Visually, it arranges the content into multiple lines with other inline-level elements. Typically, such as paragraph content, text (which can be in a variety of formats such as emphasis), or pictures, are inline-level elements.

Inline-level elements generate inline-level boxes (inline-level boxes) that participate in the inline formatting context (inline formatting context). The inline level box that is also involved in generating the inline formatting context is called the inline box (Inline boxes). The boxes generated by all non-replacement elements of display:inline are inline boxes. An inline-level box that is not involved in generating an inline formatting context is called an atomic inline-level box (atomic inline-level boxes). These boxes are generated by replaceable inline elements, or elements with a display value of inline-block or inline-table, and cannot be split into multiple boxes.

Note: at first, the atomic inline box (atomic inline-level boxes) was called the atomic inline box (atomic inline boxes). Unfortunately, they are not in-line boxes. The standard corrigendum corrects this error. In any case, when you see the atomic inner box again, you can safely regard it as the atomic inner box, because only the name has been changed.

Atomic inline boxes cannot be divided into multiple lines in the context of inline formatting.

CSS Code copies content to the clipboard

Span {

Display:inline; / * default value*/

}

The text in span can

It is divided into multiple lines because it is an inline box.

Results:

The code is as follows:

The text in span can

Divided into multiple lines because it is a

In-line box.

CSS Code copies content to the clipboard

Span {

Display:inline-block

}

Text in span cannot be divided into multiple lines

Because it's an inline block box.

Results:

The code is as follows:

Text in span

Can't be divided into multiple lines because it

It's an inline block box.

Anonymous inline box (Anonymous inline boxes)

Similar to block boxes, the CSS engine sometimes automatically generates inline boxes. These boxes are also anonymous because they do not have corresponding selector names. They inherit all inheritable properties, and non-inherited properties take initial.

The most common example of an anonymous inline box is that the block box directly contains the text, which will be contained in the anonymous inline box. If blanks are removed using white-space, anonymous inline boxes are not generated.

Line box (Line boxes)

A box produced by an inline formatting context (inline formatting context) to represent a row. In the block box, the row box is typeset from one side of the block box to the other. When there is a float, the line box is typeset from the far right of the left float to the far left of the right float.

Line boxes are technical implementations, and developers usually don't have to worry about it.

Plug-in box (Run-in boxes)

The plug-in box, defined by display:run-in, is a block box or a row box depending on the type of subsequent box. Can be used to insert a title in the first paragraph.

Note: the plug-in box (Run-in boxes) is removed from the CSS 2.1standard because of the insufficient definition of the operable implementation. CSS3 may be introduced, but this is experimental and cannot be used in a production environment.

In addition to inline and block formatting contexts, CSS allows elements to have more content models. These additional models are designed to describe a specific layout and may define new box types:

(1) Table content model (table content model) can create a table box (table wrapper box) and table box (table box), or you can create a special box, such as a title box (caption boxes).

(2) the multi-column content model (multi-column content model) can create column boxes (column boxes) between the container box and the content.

(3) Experimental grid, elastic box content model also creates new box types.

(4) location scheme (Positioning schemes) EDIT

Once the boxes are generated, the CSS engine specifies their location. One of the following scenarios will be used:

(1) regular stream (normal flow) boxes are arranged one after another.

(2) the floats scheme takes the box out of the regular stream and places it next to the current box.

(3) the box coordinates in absolute positioning (absolute positioning) are absolute. Absolute positioning elements can cover elements that use other positioning schemes.

Regular flow (Normal flow)

In a regular flow, boxes are arranged one after another. In the block-level format context, they are arranged vertically; in the inline format context, they are arranged horizontally. Regular flow is triggered when position is static or relative and float is none.

(1) in the context of block-level formatting, regular streams are arranged vertically.

(2) regular flows are arranged horizontally in the context of inline formatting.

Regular flow is divided into two situations:

(1) for static positioning (static positioning), the position value is static, and the location of the box is the location in the regular flow layout.

(2) for relative positioning (relative positioning), the position value is relative, and the box offset position is defined by these attributes top, bottom, left and right. Even if there is an offset, it still retains the original position, which cannot be occupied by other regular streams.

Floating (Floats)

For floating positioning scheme (float positioning scheme), the box is called floating box (floating boxes). It is at the beginning or end of the current line. This causes the regular flow to surround it unless the clear property is set.

To use the floating positioning scheme, the element CSS attribute position is static or relative, and then float is not none. If float is set to left, the float is positioned from the beginning of the line box. If set to right, the float is positioned at the end of the line box.

Absolute positioning (Absolute positioning)

For the absolute positioning scheme, the box is removed from the regular flow and does not affect the layout of the regular flow. It is positioned relative to its containing block, and related CSS attributes: top, bottom, left and right.

If the element's attribute position is absolute or fixed, it is an absolute positioning element.

A fixed positioning element (fixed positioned element) is also an absolute positioning element, and its containing block is a viewport. When the page scrolls, it is fixed to the screen because the viewport does not move.

After reading the above, have you mastered how to write a visual formatting model in CSS code? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.