DOM node rendering explained in detail--box generation to layout process

The visual format model of CSS is an algorithm that processes the document and displays it in a visual medium. It is the basic concept of CSS, the visual format model transforms each document element, and generates 0 or one or more boxes that conform to the CSS box model rules. The layout of each box is affected by the following:
1. The size of the box;
2. Type of box;
3. Positioning of the program;
4. Its descendants and brothers;
5. Visible area and position;
6. The size of the image it contains;
7. Other additional information;

A particular model renders each box, which is related to the block that contains the box. Typically, a box creates an inclusion block for his descendant elements, unless the box is not constrained by the containing block, such as a box whose layout is outside the containing block, which is also called overflow.

The creation of a box

Box generation is part of the CSS Visual format model, which says that CSS visual format models generate boxes for document elements that are different types, depending on the display property value of the CSS. The visual format model takes different behaviors for different types of boxes.

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

When an element of CSS's display property value is: Block,list-item or table, this element is called a block-level element. A block-level element is usually visualized as a block and is typically placed vertically.

Each block-level box will have a block-level formatting context (BFC). Each block-level element generates at least one block-level box, which is called the main block-level box. Some elements, such as the list-item element, generate more boxes, but only one main block-level box.

The main block-level box contains the box generated by the descendant and its own generated content, which is related to the targeted scenario.

A block-level box may also be a block container box. A block container is a box with only a block-level box or a row-level box. It is important to note that the concept of block-level boxes and block container boxes is irrelevant. A block-level box describes the way the box interacts with his father and his brother, and the Block container box describes how its descendants interact. Some block-level boxes, such as table, are not block container boxes. and some block container boxes, such as some non-replaceable inline blocks and some irreplaceable table elements, are not block-level boxes. A box that is both a block-level box and a fast container box is called a block boxes.

Anonymous Block Boxes (block anonymous box)

In some cases, the visual format model needs to add additional boxes. Because CSS selectors cannot add styles or names to such boxes, they are called anonymous boxes.

Block container boxes can contain only block-level boxes or only row-level boxes. But usually the document contains two types of boxes. In this case, a block-level anonymous box is created that contains a row-level box.

The following code:

<divtextbyabytext.</div>

Two block-level anonymous boxes will be created, one for containing some inline text, and one for containing the followed by more inline text, respectively, <p> before and after. The results will look like this:

textbyabytext.

The anonymous box above is not like the P tag, his style is not control, can only use the inherited style or the default style, not like the P-style custom own, such as P can set their own background-color, And two anonymous can only use Div's background-color.

Another causes the anonymous block box to be created when one or more block boxes are included in a row box. In this case, the line box is divided into two row boxes, one before the Block box and one behind him. All row boxes are then enclosed by an anonymous block box. Finally, this block box has two anonymous block box brothers, and the two anonymous block boxes contain a row box.

For example:

<span>thisis a inline<p>thisis a block</p>thisis a inline</span>

The above will first become:

<span>thisis a inline</span><p>thisis a block</p><span>thisis a inline</span>

Finally, wrap an anonymous block box to span.

Inline-level Elements and Inline boxes (row-level elements and Row boxes)

When an element of CSS's display property value is: Inline,inline-block or inline-table, this element is called a row-level element, usually it is not a block of content, but and other row-level content is distributed in one row. A typical line of content in multiple formats, such as emphasis and images, is defined as a row-level element.

Row-level elements will give birth to a line-level box. A line box is a box that is both a row-level box and a box whose contents participate in the inline formatting context of IFC. For example, all non-replaceable display values are inline elements. The boxes in the row-level boxes whose contents are not formatted with IFC are called Atomic inline-level boxes (automatic row-level boxes). These boxes are generated by alternative row-level elements or elements with display property values of Inline-block or inline-table, and they will not be broken into several boxes if they can be used in a row box.

The difference between a row-level box and an automatic row-level box:

<style ;   span  {display : inline  ;  /* default value*/     </style ;  <div   Style  = "WIDTH:20EM;"   the text in the span <span ;  can is Split in several lines as It</span ;  was an inline bo X.</div ;   

The width limit above, he may appear as follows:
The text in the span can be split into
several lines as it's an inline box.

<style>  span {    display:inline-block;  }</style><div style="width:20em;">   <span>cannot be split in several   lines as it</span> is an inline-block box.</div>

And above this he might show this:

textinthesplitintolinesasitan inline-block box.

Anonymous Inline boxes (anonymous row level box)

For block boxes, there are situations where the CSS engine automatically creates a row box. These line boxes are also anonymous, they cannot be named, they are styled by inheriting styles or some default styles.

When a row-level box is created, a more numerous case is found in a block box with some children and text elements that are formatted by IFC. In this case, the text element is contained in a large row of anonymous boxes. The whitespace inside the element is handled by the White-space property in the CSS so that it does not establish an anonymous row-level box for a blank space.

An anonymous row-level box is created as follows:

<Div>some InlinetextFollowed by aParagraph followed byMore inlinetext. Some InlinetextFollowed by aParagraph followed byMore inlinetext. Some InlinetextFollowed by aParagraph followed byMore inlinetext. Some InlinetextFollowed by aParagraph followed byMore inlinetext. </Div>

The display of the div here is set to inline;

Other types of boxes (line boxes and run-in boxes)

Line boxes is generated by IFC and represents a row of text, and in the Block box, a line boxes is lined up. When there is float, the left side of the line is the right side of float for left and the right side of the row is the leftmost of the float.

The use of these boxes, the general situation will not have any trouble.

Run-in boxes the element defined by display as run-in generates the box, which can be a block box or an inline box, depending on the type of box that follows him. They can be used to create a caption that is located in front of the paragraph. It is worth noting that he was removed from the CSS2.1, CSS3 or experimental, and should not be used in the actual code.

The layout of the box

Once the box is generated and rendered, the CSS engine begins to position and layout it, using the following rules:
1. In the ordinary flow, the box is one after another orderly;
2. In a box using float positioning, the box will be repositioned to the left or right in the box in which he is located;
3. In absolute absolute positioning, this absolute position relative to the element will create a coordinate system for the positioning of this element, the absolutely positioned element may be covered by other elements;

Nomal flow (normal flow)

In a normal flow, the box is placed one after the other, in the BFC area, the box is vertically distributed, and in the IFC, the box is horizontally distributed. When the Position property value is static or the value of Relative,float is None, the element box is in the normal stream.

Float (float)

In a floating positioning system, there is a special box that points to the beginning or end of the current line, which is called (floating boxes or simply floats). If float is set to left, the float will be pointed at the beginning of the line, right, and the float will be pointed at the end of the line.

Absolute positioning (absolute positioning)

In an absolute positioning system, the box is completely removed from the normal stream and does not interact with the box in the flow. Their position depends on the coordinate system of the container box they are relative to, setting their own coordinates through Top,buttom,left and right.

An element is absolutely positioned, the value of his Dispaly property is absolute or fixed.

With a fixed merit element, his container box is the view window. His coordinates are relative to the entire view window, and the slider's slide does not change its coordinates.

Different types of boxes have different internal layout rules

As mentioned earlier, different types of boxes participate in different visual format models (the container that determines how documents are rendered). The following is a BFC (block-level formatting context) and IFC (inline formatting context).

Block formating Context (BFC)

He is a separate area, with only block-level box involved, and he prescribes how the internal block-level box is laid out and irrelevant to the outside of the area.

The following conditions generate a BFC region:
1. root element;
2. The Float property value is not none;
3. Position attribute value is absolute or fixed;
4. Display property value is Inline-block,table-cell,table-caption,flex,inline-flex;
5. The overflow attribute value is not visible;

BFC Rules:
1. The inner box will be placed vertically, one after the other;
2. The distance from the box vertically is determined by margin.
3. The left side of each element's margin box, touching the left side of the containing fast, even if there is a float;
4. The BFC area does not overlap with float;
5. BFC is a separate, isolated container on the page, and the child elements within the container do not affect the outer elements;
6. When calculating the height of the BFC, floating elements are also involved in the calculation.

BFC contains each element that he creates, but does not contain the descendant elements of the created element, and those descendant elements are created by a new BFC descendant element.

BFC is important in locating and floating, as this operation will only affect the same BFC area, not the other areas affected. For example, clearing a float does not affect the layout in other BFC, and clearing floats is done only in the same BFC.

inline formating context (inline formatting contexts)

Not a row-level element is involved in IFC, you can see that the Display property value of Inline-block element will be born row-level box but he will participate in BFC. The Line box participates in IFC. For IFC, the row height is calculated from the highest actual height of the element in the row.

Here are some of the IFC's rule applications:
1. The line box generally clings to the entire IFC, but is disturbed by float. The float element is located between the IFC and the row box.
2. Center horizontally: When you want a fast horizontal center, set Inline-block will generate an IFC in the outer layer (note that the outer layer is generated, not the element itself), through the text-align can be achieved horizontally center;
3. Center vertically: Create an IFC, open the height of the parent element with one of the elements, then set the Vertical-align:middle, and the others can be displayed vertically.

Div Horizontal Center:

<style> body  {text-align :  center  ;     #mzz  {width : 400  px  ; height :    px  ; display :  Inline-block ; border :   1  px Solid  #ff0000   ;     </style>The above text-align and display are indispensable<body>    <div id="Mzz">    </div></body>

DOM node rendering explained in detail--box generation to layout process