Deeply understand the characteristics of standard flow and off standard elements

Deeply understand the characteristics of standard flow and off standard elements

1. Standard flow （Normal Flow）

By default , The elements are in accordance with normal flow（ Standard flow 、 Conventional flow 、 Normal flow 、 The document flow ） Arranged .

• Arrangement order ： In the browser From left to right , From top to bottom Sequential placement ;
• By default , Elements interact with each other There is no lamination ;

2. Under what circumstances will elements be de labeled ？

Out of the standard stream （ abbreviation “ De labeling ”）, So when does an element break away from the standard flow ？ There are two common ：

• Element settings position, also position The value of is fixed or absolute;
• Add floating element float, also float The value of the none;

3. Characteristics of off standard elements

• You can set the width and height at will , The width and height are determined by the content by default .

  • Block-level elements ：

    • The standard of （ By default, it takes up the width of the parent element ）;

      

    • Off bid display （ Width and height are supported by content ）;

      

  • Inline elements break away from the standard flow ：

    • The standard of （ By default, it is supported by content , And the width and height cannot be set ）;

      

    • Off bid display （ Width and height are still supported by the content , But you can set the width and height ）;

      

• No longer constrained by the standard flow .

• No longer report width and height data to the parent element , That is, you can't open the parent element .

4. Off label and display What does it matter ？

According to the characteristics of the above off standard elements , Some people may think that de labeling is actually converting elements into inline-block, Because of its display effect and setting display: inline-block; The effect is consistent , But the reason is not so .

When different elements are de labeled , The correspondence will be displayed as display What kind of attribute value ？ stay MDN and W3C There are explanations on the official website , And a reference table is provided ：

• MDN in , To search for float Attribute as an example ;

  

• stay W3C In official documents , About display、position and float The relationship between ;

  

summary ：

• Most elements will be converted into... After de labeling block type .
• A question can be raised here ,block Isn't the type occupying the width of the parent element , Why is the off label element finally supported by the content ？
• answer ： After element de labeling , No longer constrained by standard flow , The position of the parent element is not limited , It's hard to say who the parent element is , And block level （block） The default width and height of elements are auto, It is difficult to refer to the parent element width , Therefore, the best display form is to be supported by the content by default .