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

This article mainly explains "what is the visual formatting model in CSS". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the visual formatting model in CSS".

The CSS Visual format Model (visualformattingmodel) is a computational rule used to process and display documents on visual media. This model is one of the basic concepts of CSS.

The visual formatting model converts the elements in the document into boxes based on the CSS box model, and the layout of each box is determined by the following factors:

Size of the box: precisely specified, specified by constraints, or not specified

Types of boxes: inline box (inline), inline box (inline-level), atomic inline box (atomic

Inline-level), block box (block)

Positioning scheme (positioningscheme): ordinary flow positioning, floating positioning or absolute positioning

Other elements in the document tree: child or sibling elements of the current box

Viewport size and position

The size of the picture contained

Some other external factors

The model renders the box according to the boundary of the box's containing block (containingblock). In general, a box creates an inclusion block that contains its descendant elements, but the box is not restricted by the containing block. When the layout of the box runs outside the containing block, it is called overflow.

Introduction to box generation

Box generation is part of the CSS visual formatting model, which is used to generate boxes from document elements. There are different types of boxes, and different types of boxes have different formatting methods. The type of box depends on the display property of CSS.

Block-level elements and block boxes

An element becomes a block-level element when its display is block, list-item, or table. A block-level element is formatted into a block (such as a paragraph of an article), which is arranged vertically by default.

Each block-level box participates in the creation of a block formatting context (blockformattingcontext), and each block-level element generates at least one block-level box, the main block-level box (principalblock-levelbox). Some elements, such as list items, generate additional boxes to place bullets, while those that generate list items may generate more boxes. However, most elements generate only one master block-level box.

The master block-level box contains boxes and content generated by descendant elements, and it also participates in the positioning scheme.

A block box may also be a block container box. Block container boxes (blockcontainerbox) either contain only other block-level boxes or only inline boxes and create an inline formatting context (inlineformattingcontext) at the same time.

It is important to note that block-level boxes are different from block container boxes. The former describes the behavior between the element and its parent and sibling elements, while the latter describes the behavior between the element and its descendants. Some block-level boxes are not block-level boxes, such as tables, and some block-level boxes are not block-level boxes, such as non-replacement in-row blocks and non-replacement table cells.

A blockbox box that is also a block container box is called a block box.

Anonymous block box

In some cases, when you do visual formatting, you need to add some complementary boxes that cannot be selected with the CSS selector, so they are called anonymousboxes.

The CSS selector cannot act on anonymous boxes (anonymousboxes), so it cannot be styled by stylesheets. That is, all inheritable CSS attribute values are inherit and all non-inheritable CSS attribute values are initial.

Block inclusion boxes may contain only inline-level boxes or block-level boxes, but usually documents contain both, in which case anonymous block boxes are created outside of adjacent inline-level boxes.

Sample section

Consider the following HTML code, assuming that both and remain in the default style (that is, their display is block):

Someinlinetext

Followedbyaparagraph

Followedbymoreinlinetext.

Two anonymous block boxes are generated: one is the text in front of the element (Someinlinetext), and the other is the text after the element (followedbymoreinlinetext.). The following block structure is generated:

2976188203-5c28f59186cda_articlex.png

It is displayed as:

Someinlinetext

Followedbyaparagraph

Followedbymoreinlinetext.

For these two anonymous boxes, programmers can't be like

Elements control their style in that way, so they derive from

Inherit those inheritable properties, such as color. Other non-inheritable properties are set to initial, for example, because no background-color is specified for them, so they have a default transparent background, while the box of the element can specify the background color with CSS. Similarly, the text color of two anonymous boxes is always the same.

Another situation where anonymous block boxes are created is when an inline box contains one or more block boxes. At this point, the box containing the block box is split into two inline boxes, one in front of the block box and the other behind the block box. All inline boxes in front of the block box are wrapped in an anonymous block box, and so are the inline boxes behind the block box. Therefore, the block box will become the brother box of these two anonymous block boxes.

If there are multiple block boxes and there are no inline elements between them, two anonymous block boxes are created in front of and behind the boxes.

Inline level elements and inline box subsections

An element is called an inline-level element if its display attribute is inline, inline-block, or inline-table. When displayed, it does not generate a block of content, but can be displayed as multiple lines along with other inline-level content. A typical example is a paragraph that contains content in a variety of formats (such as highlighted text, pictures, etc.), which can be made up of inline-level elements.

Inline-level elements generate an inline-level box that also participates in the creation of an inline formatting context (inlineformattingcontext). An inline box is both an inline box and a box whose contents participate in creating the inline formatting context of its container, such as all non-replacement boxes with display:inline styles. If the contents of an inline-level box do not participate in the creation of an inline formatting context, it is called an atomic inline-level box. Boxes created by replacing inline-level elements or elements with a display value of inline-block or inline-table will not be split into multiple boxes like inline boxes.

Note: at first, atomic in-line boxes are called atomic in-line boxes, which is not accurate because they are not in-line boxes. The problem was later corrected in an errata. However, when you see the use of "atomic in-line box" in some articles, you can think of it as "atomic in-line box", because it is only a name change.

Atomic inline boxes cannot be split into multiple lines in the same inline formatting context:

Span {

Display:inline;/*defaultvalue*/

}

Thetextinthespan

Canbesplitinseverallinesasit

Isaninlinebox.

It may be displayed as:

Thetextinthespancanbesplitintoseveral

Linesasitisaninlinebox.

And:

Span {

Display:inline-block

}

Thetextinthespan

Cannotbesplitinseverallinesasit

Isaninline-blockbox.

It may be displayed as:

Thetextinthespan

Cannotbesplitintoseverallinesasitisan

Inline-blockbox.

The "cannotbesplitintoseverallinesasit" will never change the line.

Anonymous in-line box

Similar to block boxes, the CSS engine sometimes automatically creates some inline boxes. These inline boxes cannot be selected by the selector, so they are anonymous, inheriting those inheritable attributes from the parent element, and leaving the other attributes at the default value of initial.

A common situation is that the CSS engine automatically creates an inline formatting context for the text contained directly in the block box, in which case the text is contained in an anonymous inline box large enough. However, if only spaces are included, anonymous inline boxes may not be generated, because spaces may be removed due to the setting of white-space, resulting in the actual content being empty.

Other types of boxes

Line box

The line box is created by the inline formatting context to display a line of text. Inside the block box, the row box always extends from one side of the block box to the other. When there is a floating element, the row box extends from the right edge of the element floating to the left to the left edge of the element floating to the right.

Row boxes exist more for technical purposes, and Web developers usually don't need to care.

Run-in box

The Run-in box is defined by display:run-in, which can be either a block box or an inline box, depending on the type of box that follows. The Run-in box can be used to embed the title in the first paragraph of the article where possible.

Note: the Run-in box has been removed from the CSS2.1 standard, but may be added again as an experimental content in CSS3. Therefore, it is best not to use it for formal projects.

Boxes introduced by other models

In addition to inline and block formatting contexts, CSS defines several content models that can also be applied to elements. These models are generally used to describe layouts, and they may define some additional box types:

The table content model may create a table wrapper box and a table box, as well as several other boxes such as the table title box

A multi-column content model may create multiple column boxes between container boxes and content

Experimental grid content models or flex-box content models also create other kinds of boxes.

Positioning rule

Once the boxes are generated, the CSS engine needs to locate them to complete the layout. Here are the rules used to locate the box:

Normal flow: locate each box in order

Float: separate the box from the normal stream and place it on one side of the outer box

Absolute positioning: the box is positioned according to the absolute position, which is calculated according to the absolute coordinate system established by the containing element of the box, so the absolute positioning element may cover other elements.

Introduction to ordinary flow

In a normal stream, the boxes are placed in turn. In the context of block formatting, boxes are arranged vertically, while in the context of inline formatting, boxes are arranged horizontally. When the position property of CSS is static or relative, and float is none, its layout is normal stream.

Floating introduction

In a floating positioning, the floating box floats to the beginning or tail of the current line. This causes text and other content in the normal stream to "stream" to the edge of the floating box, unless the element clears the previous float through clear. When the float value of a box is not none and its position is static or relative, the box is floating positioning. If float is set to left, the floating box is positioned at the start of the current row box (left), and if set to right, the floating box is positioned at the end of the current row box (right). Whether floating on the left or right, the row box scales to fit the size of the floating box.

Introduction to absolute positioning

In absolute positioning, the box is completely removed from the current stream and is no longer associated with it. The absolute positioning element still has a parent-child or sibling relationship with other elements in the document tree, and its location uses top, bottom, left and right.

It is calculated relative to its containing block. If the position of an element is absolute or fixed, the element is absolute positioning.

For an element in a fixed position, the block is the entire viewport, and the element is positioned absolutely relative to the viewport, so the position of the element does not change as you scroll.

Thank you for your reading, the above is the content of "what is the visual formatting model in CSS". After the study of this article, I believe you have a deeper understanding of what the visual formatting model is in CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.