Why do WE need to understand the visual formatting model?

To explain some CSS effects, the following questions:

  • Child1: Normally auto is set horizontally to center horizontally. In the following example auto is set vertically to center vertically. The reason is at the end: explain the problem at the beginning


Horizontal and vertical center

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      html.body {
        margin:0;
        height: 100%;
      }

      .parent {
        position: relative;
        height: 100%;
        background-color: #f3f3f3;
      }

      .child {
        position: absolute;
        margin: auto;
        width: 200px;
        height: 200px;
        background-color: #61C1E8;
        top: calc(50% - 100px);
        left: calc(50% - 100px);
      }

      .child1 {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
  </head>

  <body>
    <div class="parent">
      <div>text</div>
      <div class="child"></div>
      <div class="child1"></div>
    </div>
  </body>
</html>
Copy the code









What is the visual formatting model?

define

The Visual formatting model, which stands for Visual Formatting Model, is used to describe how user agents (such as browsers) process document trees in graphical media. In the visual formatting model, each element of the document tree produces zero to more boxes, depending on the box model.

www.w3.org/TR/CSS22/vi…

  • box dimensions and type.
  • positioning scheme (normal flow, float, and absolute positioning).
  • relationships between elements in the document tree.
  • external information (e.g., viewport size, intrinsic dimensions of images, etc.).
  • Size and type of box model
  • Positioning solutions [Normal document flow, floating and Absolute positioning]
  • Relationships between elements within a document tree
  • External information (viewport size, intrinsic size of picture, etc.)


Noun explanation

Element piece

CSS assumes that every element generates a Box, called an element Box.

Replace/non-replace elements

In CSS, the presentation of replacement elements is not controlled by CSS. These elements are external objects, and the rendering of their appearance is CSS independent. In short, their content is not affected by the style of the current document. CSS can affect the position of the replaceable element, but not the content of the replaceable element itself. Some replaceable elements, such as elements, may have their own style sheets, but they do not inherit the style of the parent document.

Typical substitutable elements are:

<iframe>
<video>
<embed>
<img>
Copy the code

Some elements are treated as substitutable elements only in certain cases, for example:

<option>
<audio>
<canvas>
<object>
<applet>
Copy the code


The HTML specification says soElement is replaceable because of type “image”Elements likeSame substitution. But other forms of control elements, including other typesElement that is explicitly listed as non-replaceable elements. The specification uses the term Widgets to describe their default platform-specific rendering behavior.

Viewport (viewport)

Continuous media user agents typically provide the user with an viewport (a window or view area on the screen) through which the user can view documents. When the viewport size changes (see initial include block), the user agent may change the layout of the document. When the viewport is smaller than the canvas area of the rendering document, the user agent should provide a scrolling mechanism. One canvas corresponds to at most one viewport, but the user agent may render to multiple canvases (that is, provide different views of the same document)


Containing block

www.w3.org/TR/CSS22/vi…

In CSS 2.2, 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.

In css2.2, the positioning and size of many boxes are calculated from the edges of boxes in the exhibit called inclusion blocks. In general: the generated box will act as a containment block for the descendant element. We call this box a containment block for the descendant element. The phrase “a box’s containing block” means the containing block containing the current element, not the containing block created by the current element. Understanding: The inclusion block refers to the layout context of the element.

Contains the definition of a block

www.w3.org/TR/CSS22/vi… Definition of “containing block” The position and size of an element’s box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

  • The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The ‘direction’ property of the initial containing block is the same as for the root element.
  • For other elements, if the element’s position is ‘relative’ or ‘static’, the containing block is formed by the content edge of the nearest ancestor box that is a block container or which establishes a formatting context.
  • If the element has ‘position: fixed’, the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media.
  • If the element has ‘position: absolute’, the containing block is established by the nearest ancestor with a ‘position’ of ‘absolute’, ‘relative’ or ‘fixed’, in the following way:
    • In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.2, if the inline element is split across multiple lines, the containing block is undefined.
    • Otherwise, the containing block is formed by the padding edge of the ancestor.

If there is no such ancestor, the containing block is the initial containing block.

  1. The contain block in which the root element resides is called the initial contain block.
  2. If the element’s position property is releative or static. The containing block is the nearest block-level box or the ancestor element that establishes the format context.
  3. If the position attribute of the element is fixed. Continuous media containing blocks as viewports. Multi-page media, containing blocks as page areas.
  4. If the position attribute of the element is absolute. Contains the block by hasThe value of position is absolute, relative, or fixedtheRecent ancestral elementSet up.
    1. If the ancestor element is inline, the contain block is the first inline element created by the current inline element and the bounding box around the padding box of the last inline element
    2. In other cases, the containing block is composed of an ancestor’s fill edge.
  5. If there is no parent above, the contain block is the initial contain block.

Let’s give 4.a an example:

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      html.body {
        margin:0;
        height: 100%;
      }

      .parent {
        position: relative;
        height: 100%;
        background-color: #f3f3f3;
      }

      .child{}.child1 {
        position: absolute;
        bottom: 10px;
        right: 0px;
        background-color: #61C1E8;
      }

      .child2 {
        display: inline-block;
        width: 200px;
        height: 200px;
    </style>

  </head>

  <body>
    <div>
      <span class="parent">
        <span class="child">1111111</span>
        <span class="child1">2222</span>
        <span class="child2">333333333333333333333333333333333333333333333333333333333333333</span> 
      </span>
    </div>
  </body>
</html>
Copy the code




Generated box

Part of the CSS visual formatting model is generating boxes from document elements. The resulting boxes have different types and affect the processing of the visual formatting model. The type of the generation box depends on the CSS property display


Block-level elements and block-level boxes

Typically, a block-level element produces a principal block-level box, which contains descendant boxes and the contents of the descendant boxes. A primary block-level box can participate in any positioning scheme. Block-level elements are formatted as visible blocks in the source document. Display attributes are block, list-item, and table elements are block-level elements. Block-level elements

  • An element is a block-level element when its CSS display is block,list-item, or table
  • Block-level elements are visually presented as blocks, arranged vertically

Block-level box

  • Block-level boxes are used to describe their behavior with parent and sibling elements
  • Block-level boxes participate in block formatting context
  • Each block-level element generates at least one block-level box, known as the Principal block-level box. Some elements, like<li>Generates additional boxes to place bullet points, but most elements generate only one main block-level box
  • The main block-level box will contain boxes generated by descendant elements as well as generated content
  • The primary block-level box is a box that can use the Position scheme

Note: Some block-level elements may produce additional boxes as well as primary block-level boxes. For example, display elements with a “list-item” attribute generate extra boxes to contain bullets. (You can use the list-style position attribute to set whether the extra boxes are placed inside or outside the main block-level box.)

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      ul[list-style-position="inside"] {
        background: yellow;
        list-style-position: inside;
      }
       
      ul[list-style-position="outside"] {
        background: yellow;
        list-style-position: outside;
      }
    </style>

  </head>

  <body>
    <ul list-style-position="inside">
      <li>rod</li>
      <li>augmentum</li>
    </ul>
    <ul list-style-position="outside">
      <li>rod</li>
      <li>augmentum</li>
    </ul>
  </body>
</html>
Copy the code



Block container box

In addition to table boxes and replaceable element boxes, a block-level box can also be a block-container box, which has two functions (only one function at the same time)

  • Use only to contain other block-level boxes
  • Creates an inline formating context, which is used only to contain inline boxes.

Not all block-container boxes are block-level boxes. Non-replacement inline blocks and non-replacement table cells are block container boxes, but not block-level boxes. If a block-level box is also a block-container box, the block-level boxes are called block boxes.

  • The block container box describes the impact on its descendants
  • A block-level box may also be a block-container box
  • Block Container boxes contain only other block-level boxes, or generate an inline formatting context, which contains only inline boxes
  • Some block-level boxes, such as tables, have substitutable elements that are not block-container boxes. Instead, some block container boxes. Such as non-replacement inline blocks and non-replacement table cells, not block-level boxes
  • Block boxes that are also block containers are called block boxes.



Block level box, block container box block box example

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .block-level-box {
        display: block;
      }

      .block_container_box {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
      }

      .block_box {
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
    </style>

  </head>

  <body>
    <img class="block-level-box" src="Https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2015%2F0107%2F1daf01ab3e6dc38c15e Fa15c4a6f7a40.jpg&refer=http%3A%2F%2Ffile02.16sucai.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1619604060 &t=58546a123e31a1c096d02cbc1ee72c4a" />
    <div class="block_container_box">
      
    </div>

    <div class="block_box">
      
    </div>
  </body>
</html>
Copy the code

To understand:

  • In fact, most block boxes are block container boxes
  • If you have to break it down, the block box refers to the external representation. Block container boxes are internal representations.
  • Because the internal presentation of replaceable elements is not controlled by CSS, the internal presentation of replaceable elements is not a block-level container box. Then we display it to the outside world and set it to a block-level box through display. Are individual block-level boxes instead of block-level container boxes.
  • Non-replaceable elements are basically block-level container boxes. But for a separate block-level container box, instead of a block-level box, you need to set the display of non-replaceable elements to a non-block-level box.


Inline elements and inline boxes

Inline elements are those elements that do not form new blocks of content in the source document, but are distributed within the line (for example, emphasis text in paragraphs, inline images, etc.). Elements whose display attribute values are “inline”, “inline-table”, and “inline-block” are inline elements. Inline elements produce inline-level boxes, which participate in the layout of inline formatting contexts. An inline box is an inline box whose contents participate in the layout of the inline context that it contains. Non-substitutable elements with a display value of “inline” produce inline boxes.

Inline elements such as inline-level elements, inline-block elements, And inline-table elements are called atomic inline-level boxes. The atomic inline box participates in the layout of the inline format context as an indivisible whole (it cannot be split into boxes for cross-line display).


The overview

Inline level elements (inline-level elements)

  • An element is an inline element when its CSS attribute display is inline,inline-block, or inline-table
  • Visually it arranges content in multiple rows with other inline elements. Typical elements such as paragraph content, text (which can have multiple formats such as emphasis), or images are inline elements

Inline-level boxes

  • Inline elements generate inline boxes
  • Participating in inline formatting context
  • In-line boxes are divided into in-line boxes and atomic in-line boxes

Inline boxes

  • Inline boxes that participate in generating inline formatting context are called inline boxes
  • All non-replacement elements of display:inline generate boxes that are inline boxes

Atomic inline-level boxes

  • In-line boxes that participate in generating in-line formatting context as opaque boxes are called atomic in-line 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

example

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .inline_boxes{}.atomic_inline_level_boxes {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
      }

    </style>

  </head>

  <body>
    <span class="inline_boxes">123</span>
    <span class="atomic_inline_level_boxes">456</span>
  </body>
</html>
Copy the code

understand

  • Inline elements are all inline boxes
  • Participate in inline formatting context
  • There are inline boxes and atomic inline-level boxes based on the way they participate.
  • The internal display of the replaceable element is determined by the content, inline-block, inline-table is a block element. The width is determined by the element’s box model. In each case, participation in the inline context takes place as a whole. This is called an atomic inline box.


The anonymous block boxes

In some cases, visual formatting requires the addition of additional boxes that cannot be selected with CSS selectors, hence the name anonymous boxes. CSS selectors do not work on anonymous boxes, so they cannot be styled by a stylesheet. That is, all inheritable CSS property values are inherit, and all non-inheritable CSS property values are initial.

The first kind of

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

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    </style>
  </head>

  <body>
    <div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>
  </body>
</html>
Copy the code

The second,

An inline box contains one or more block boxes. At this point, the box containing the block box is split into two inline boxes (which are also contained by an anonymous block-level box), one before and one after the block box.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    </style>
  </head>

  <body>
    <span>Some inline text <p>followed by a paragraph</p> followed by more inline text.</span>
  </body>
</html>
Copy the code


Other types of boxes

Line box

Line boxes are created by the inline formatting context to display a line of text. Inside a block box, row boxes always extend 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 left to the left edge of the element floating right.

Row boxes exist for more technical purposes, and Web developers generally don’t need to worry about them.


The Run – in the box

A run-in box is defined by display:run-in, which can be either a block box or an in-line 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 if possible.

Note: The run-in box has been removed from the CSS 2.1 standard, but may be added again as an experimental feature in CSS 3. Therefore, it is best not to use it for formal projects.


Positioning rules

Once the boxes have been generated, the CSS engine needs to locate them to complete the layout. Here are the rules to use when locating a box:

  • Normal flow: Position each box in order
  • Float: Lift the box out of the normal stream and place it on one side of the outer box
  • Absolute positioning: Positioning a box in absolute position, calculated according to the absolute coordinate system established by the containing elements of the box, so that the absolute positioning elements may overwrite other elements

Normal flow

In normal flow, the boxes are placed in sequence. In the context of block formatting, boxes are arranged vertically; In the context of inline formatting, the boxes are arranged horizontally. When the position property of the CSS is static or relative and float is None, the CSS layout is normal flow.


Float [further detailed articles]

In float positioning, float boxes float to the beginning or end of the current row. This causes text and other content in the normal stream to “flow” to the edge of the float box, unless the element clears the previous float with clear.

A box is floating when its float is not None and its position is static or relative. If float is set to left, the float box is positioned at the beginning of the current row box (left), and if it is set to right, the float box is positioned at the end of the current row box (right). Row boxes scale to fit the size of the float box, whether left or right.


Absolute positioning [further detailed articles]

In absolute positioning, the box is completely removed from the current stream and is no longer associated with it. Only bit and position calculations are specified here, and absolute positioned elements still have parent or sibling relationships with other elements in the document tree), and their positions are evaluated relative to their containing blocks using top, bottom, left, and right.

If the element’s position is absolute or fixed, the element is absolute.

For fixed-position elements, the containing block is the entire viewport, and the element is absolutely positioned with respect to the viewport, so the element’s position does not change as it scrolls.


Solve the initial problem

Box offset: top, right, bottom, left

www.w3.org/TR/CSS22/vi…

An element is said to be positioned if its ‘position’ property has a value other than ‘static’. Positioned elements generate positioned boxes, laid out according to four properties:

This property specifies how far an absolutely positioned box’s top margin edge is offset below the top edge of the box’s containing block.

intial value: auto

Translation:

  1. If an element’s position attribute is not static, the element is considered to be positioned. The positioning element generates positioning boxes based on four attribute values.
  2. The distance between the four attribute values is the distance between the top distance of the positioning box and the current box containing block edge.
  3. The initial value is auto.


Relationship between display, position, and float

www.w3.org/TR/CSS22/vi…

The three properties that affect box generation and layout — ‘display’, ‘position’, and ‘float’ — interact as follows:

  1. If ‘display’ has the value ‘none’, then ‘position’ and ‘float’ do not apply. In this case, the element generates no box.
  2. Otherwise, if ‘position’ has the value ‘absolute’ or ‘fixed’, the box is absolutely positioned, the computed value of ‘float’ is ‘none’, and display is set according to the table below. The position of the box will be determined by the ‘top’, ‘right’, ‘bottom’ and ‘left’ properties and the box’s containing block.
  3. Otherwise, if ‘float’ has a value other than ‘none’, the box is floated and ‘display’ is set according to the table below.
  4. Otherwise, if the element is the root element, ‘display’ is set according to the table below, except that it is undefined in CSS 2.2 whether a specified value of ‘list-item’ becomes a computed value of ‘block’ or ‘list-item’.
  5. Otherwise, the remaining ‘display’ property values apply as specified.
  1. If the ‘display’ value is’ none ‘and’ position ‘and’ float ‘are not set, the element does not generate a box.
  2. Otherwise, if the value of ‘positon’ is’ absolute ‘or’ fixed ‘, i.e. the box is absolutely positioned, the calculated value of ‘float’ is’ None ‘, and ‘display’ is set according to the table below. The position of the box is determined by ‘top’, ‘right’, ‘bottom’, ‘left’ and the containing block of the box.
  3. Otherwise, if the value of ‘float’ is not ‘None’, the box will float, and ‘display’ is set according to the table below.
  4. Otherwise, if the element is the root element, ‘display’ is set according to the table below.
  5. Otherwise, the remaining ‘display’ attribute values are the same as the specified values.
Specified value Computed value
inline-table table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block block
others same as specified

Block means block level box, block container box, block box.

www.w3.org/TR/CSS22/vi… The three terms “block-level box,” “block container box,” and “block box” are sometimes abbreviated as “block” where unambiguous





Absolutely positioned, non-replacement element

www.w3.org/TR/CSS22/vi…

// For absolutely positioned elements, the vertical dimension values used must meet the following constraints: For absolutely positioned elements, the used values of the vertical dimensions must satisfy this constraint:

‘margin-top’ + ‘border-top-width’ + ‘padding-top’ + ‘height’ + ‘padding-bottom’ + ‘border-bottom-width’ + ‘margin-bottom’ + ‘bottom’ = height of containing block

// If top, height, and bottom are auto. Then the ‘top’ value is the static position of the element. If all three of ‘top’, ‘height’, and ‘bottom’ are auto, set ‘top’ to the static position and apply rule number three below.

// If none of the three values is auto and margin-top and margin-bottom are auto, set the two values to equal and then calculate the equation above If none of the three are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values.

// if margin-top or margin-bottom is auto, If one of ‘margin-top’ or ‘margin-bottom’ is ‘auto’, solve the equation for that value. If the values are over-constrained, ignore the value for ‘bottom’ and solve for that value.


Explain the initial question:

      .child1 {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 200px;
        height: 200px;
        background-color: red;
      }
Copy the code


According to the above tips:

// If none of the three values is auto and margin-top and margin-bottom are auto, set the two values to equal and then calculate the equation above If none of the three are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values.



Top + bottom + width = 0 + 0 + 200 + margin-top + margin-bootom = 910px margin-top + margin-bootom = 710px margin-top = margin-bootom = 355pxCopy the code


Use the relationship between display, position, and float

It doesn’t make any difference if we set display to inline-block in the code above, because in the table above, inline-block is evaluated by the current block