This is the third day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

Standard document flow

Standard document flow refers to the automatic left-to-right, top-to-bottom streaming of elements during layout. Finally, the form is divided into rows from top to bottom, and elements are arranged from left to right in each row.

Way of layout

  • The internal layout of the box

    • Layout of text
    • The layout of the box itself

  • Layout between boxes

    • The layout of the box that flows off the standard document

      • Locate the layout
      • Liquid layout

    • Standard document flow down the box layout

      • Block-level formatting context (Block Formatting Context )
      • Inline formatting context (Inline formatting contexts )
      • Adaptive formatting context (Flex Formatting Contexts )
      • Grid layout formatting context (GridLayout Formatting Context )
      • Table layout context (Table Formatting Context )

The internal layout of the box

Layout of text

  • There is an invisibleline boxesWrap each line of text.
  • line boxesThe height of depends online-height.
  • throughline-heightYou can center a single line of text vertically.

The layout of the box itself

The box consists of content, padding, border and margin.

Box model has two kinds of standard, one is standard box model, one is IE box model.

Liquid layout

What is a floating layout?

CSS floats are floating elements that leave the normal flow of a document and move left or right, depending on the value of float, until its outer boundary touches either the inner boundary of the parent element or the outer boundary of another floating element.

See the figure below. When you float box 1 right, it leaves the document flow and moves right until its right edge touches the right edge of the containing box.

Floating layout generation:

CSS property float: left/ Right/None Left /right/ non-float (default).

Floating effects:

  • Does not affect the layout of unfloated block-level elements, but does affect the layout of inline elements.
  • Floating elements can set their width and height, which means that inline elements float as block elements.
  • Because the floating element is out of the normal flow, a height collapse occurs: the height of the parent container is the height of the current box, but when the current box floats, the height of the parent container collapses.
  • When an element floats, it jumps out of the flow of the document, meaning that while there is an element behind it, other elements are laid out directly under it, regardless of the area it occupies. But text, images, and form tags still make room for the tag, identifying the area occupied by the floating element and laying it out around it, meaning that it doesn’t move out of the text flow.

Locate the layout

What is positioning layout:

Both standard document flow and floating layouts can only lay out elements horizontally or vertically, but the reality is that we may need to offset elements in several directions at once, up, down, left, and right, and positioning layouts are designed to solve this problem.

Location layout generation:

You can place an element in a positioning layout by setting its position attribute, and set its specific offset by setting the left, right, top, and bottom attributes.

Positioning layout is divided into four types:

  • staticStatically positioned, virtually all elements are statically positioned by default, that is, in the standard flow.
  • relativeRelative to positioning, the element remains in the position it occupies in the standard flow, but in reality it isThe border and within will be displayed after the offset. In relative positioning, the element does not actually depart from the standard flow, so the browser still distinguishes whether it is block-level or some other type of element. Also, set the element’smarginProperties, in factmarginThe region appears before the element is positioned.
  • absoluteAbsolute positioning, where the element is removed from the standard stream, is treated as a block-level element by the browser and ignored by other elements regardless of what element it was before positioning. The absolute positioning offset is relative to itThe first ancestor element that has the location attributeIn addition, an absolutely positioned element automatically ignores an ancestor element that has a positioned attributepaddingProperties.
  • fixedFixed positioning, fixed positioning is similar to absolute positioning, but its offset is fixed relative to the browser window, it deviates from the standard document flow, and browsers treat them as block-level elements consistently.

In general, elements have a z-index value of 0, and elements in the positioning layout overwrite elements in the standard flow, and elements written later in the positioning layout overwrite elements written earlier. In the positioning layout, their Z-index property can be set to adjust their coverage relationship, and whoever has a larger value has a higher display priority. If the parent element of the positioned element also sets the Z-index attribute, the z-index attribute of the child element will be invalid, and the overlay relationship will be judged based on the z-index attribute of the parent element.

Format context

Formatting context is a concept in the W3C CSS2.1 specification. It is a rendering area of the page with a set of rendering rules that determine how its children will be positioned and how they will interact with other elements.

Block level formatting context

Block Formatting Context (BFC)

The BFC is a separate region, its internal elements are rendered according to its rules and do not interact with the outside of the BFC.

The BFC is created in the following ways:

  • The root element or the element containing the root element
  • Float element (float of element is not None)
  • Absolute position element (element position is absolute or fixed)
  • Inline block element (element display is inline-block)
  • Table cell (element display is table-cell, HTML table cell default value)
  • Table title (display element as table-caption, HTML table title default to this value)
  • Anonymous table cell elements (element display is table, table-row, table-row-group, table-header-group, table-footer-group) (HTML, respectively Default properties for table, row, tBody, thead, tfoot) or inline-table)
  • Overflow values are not visible block elements
  • The element whose display value is flow-root
  • Contain elements whose contain value is Layout, Content, or strict
  • Elastic elements (display is a direct child of flex or inline-flex elements)
  • Grid elements (display is grid or a direct child of the inline-grid element)
  • Multi-column containers (elements with column-count or column-width not auto, including column-count 1)
  • Column-span elements for all always create a new BFC, even if the element is not wrapped in a multi-column container

When an element sets a new BFC, it has nothing to do with the BFC outside of the element. The element only constrains its own child elements.

The BFC layout rules are as follows:

  • The inner boxes will be placed vertically, one by one;
  • The vertical distance of the box is determined bymarginDecide, belong to the sameBFCTwo neighbors ofBoxUp and downmarginThere will be overlap;
  • The left side of each element touches the left side of the containing block (and vice versa for right-to-left layouts), even if there is a float;
  • BFCThe area will not be withfloatOverlapping;
  • BFCIt is a separate container on the page, and the child elements inside the container do not affect the outside elements. And vice versa;
  • To calculateBFCWhen the float element is also involved in the calculation.

Inline formatting context

IFC( Inline formatting contexts )

The IFC is created in the following way:

  • Block-level elements contain only inline level elements.

IFC layout rules are as follows:

  • The inner boxes will be placed horizontally, one by one, with horizontal margins, inside margins, and borders;
  • IFCThe height is determined by the height of the highest box inside;
  • When a line is insufficient, it will automatically switch to the next line;
  • According to thevertical-alignAttributes are vertically aligned, either bottom aligned, top aligned, or baseline aligned (default);
  • Is that when theIFCWhen a block-level element is inserted in, two anonymous blocks are generated to split the parent element, producing twoIFC;
  • A rectangular area that can contain all the boxes on a line is called the line box.line box). The width of the line box is determined by the containing block and the float within it;
  • IFCIn the line box generally the left and right edges are close to its containing block, butfloatElements are prioritized;
  • IFCThe height of the line box inCSSRow height calculation rules to determine the sameIFCMultiple line boxes under may have different heights;
  • whenIFCWhen the total width of the box is less than the row box containing them, its horizontal rendering rule is determined bytext-alignAttribute value to determine;
  • When an inline element exceeds the width of its parent element, it is split into boxes, which are distributed across multiple line boxes. If the child element has no forced line break, the line box will not be split and will overflow the parent element.

Adaptive formatting context

Elements with display value Flex or inline-flex will generate adaptive containers for FFC(Flex Formatting Context). The Flex Box consists of a flex container and flex child elements. A flex container is obtained by setting the display:flex/inline-flex element, which is a block-level element, and inline element, which is an inline element. Elements outside the flex container are not affected.

Grid layout formatting context

GridLayout Formatting Contexts (GFC). When an element is set to Display: Grid, it will get a separate rendering area. Grid rows and columns can be defined on the grid container, defining location and space for each grid. The difference between GFC and Table is that GridLayout has richer properties for columns, alignment, and finer rendering.

Table layout context

With the continuous development of various technologies, table layout has gradually withdrawn from the stage of history, but due to some characteristics of table itself, such as up-down alignment, left-right alignment and default text center, table occupies a position in the layout of the past.

<style>
  .left {
    background: red;
  }

  .right {
    background: blue;
  }

  table {
    width: 800px;
    height: 200px;
    border-collapse: collapse;
  }
</style>
<body>
    <table>
      <tr>
        <td class="left">On the left</td>
        <td class="right">right</td>
      </tr>
    </table>
</body>
Copy the code

reference

MDN formatting context

W3school CSS float

BFC, including block, document flow, float, position is what relationship -CSS visual formatting model