Standard document flow for CSS

1. Standard document flow

Document flow refers to the element layout nesting process, the element will automatically default left to right, top-down flow arrangement . And finally the form is divided into rows from top to bottom, and the elements are arranged in order from left to right in each row.

2. Microscopic phenomenon of standard flow:

• Blank folding phenomenon.

// 比如，如果我们想让img标签之间没有空隙，必须紧密连接.
<img src="img/00.jpg"/><img src="img/02.jpg"/>

• Uneven height, aligned bottom
• Automatically wrap, when one line is not finished, write in a new line

3. Standard document flow level

Divided into two levels: block-level elements and inline elements;

Block-level elements:
1). Occupy a row and cannot be side by side with any other elements
. 2). Accept width and height.
3). If the width is not set, the width will default to 100% of the parent, which is the same width as the parent

Inline elements:
1). Side by side with other elements
2). Cannot set width and height. The default width is the width of the text.
In HTML, tags are divided into: text level and container level;
text level: p, span, a, b, i, u, em
Container level: div, h series, li, dt, dd

Reminder:

(1). Anything can be placed inside a container-level label; inside a text-level label, only text, pictures, and form elements can be placed.
(2) The .p tag is a text-level tag. Only text, pictures, and form elements can be placed in p. Others cannot be put.
(3). The definition list is a group label, but it is more complicated. Three labels appear:
dl means definition list,
dt means definition title, definition title
dd means definition description, definition expression words
dt and dd can only be in dl; There can only be dt, dd in dl

<dl> 
<dt>你好</dt> 
<dd>这里是撒哈拉沙漠</dd> 
<dt>别想</dt> 
<dd>你走不出这里的</dd> 
<dt>除非</dt> 
<dd>跪下来喊爸爸，我带你</dd> 
</dl>` 

The semantics expressed are two levels:

• It’s a list that lists hello, don’t think, unless three words
• Each word has its own description item.
  dd describes dt.

After the extension, start talking about business

The classification of css is very similar to that of HTML , except for p .
All text-level tags are inline elements , except p ;
p is a text-level, but a block-level element ;
all container-level tags are block-level elements
we use The figure shows:

[External link image transfer failed. The source site may have an anti-leech link mechanism. It is recommended to save the image and upload it directly (img-Py34aIMt-1610605723255)(//upload-images.jianshu.io/upload_images/11161012-0486c38c90e22cd2.jpg?imageMogr2 /auto-orient/strip|imageView2/2/w/758/format/webp)]

4. Interconversion between block-level elements and in-line elements

Block-level elements can be set as inline elements;
inline elements can also be set as block-level elements.
for example:

div {
  display: inline;
  background-color: pink;
  width: 400px;
  height: 400px;
}

display is the display mode, used to change the inline and block-level nature of
an element. Once display:inline is set for a label, the label immediately becomes an inline element. At this time, there is no difference between div and span. At this time, the width and height of the div cannot be set (even if it is set, it will not be displayed. If you don’t believe it, please use the code to verify it). At this time, the div can be side by side with others.

The same

span {
   display: block;
   width: 300px;
   height: 300px;
   background-color: green;
}

This span tag becomes a block-level element, which is no different from a div; at this time, the span can set the height and width; and it occupies a row, and others cannot be side by side with it; if the width is not set, it will fill the father.

There are many restrictions in the standard stream, and the nature of the label is also disgusting. The standard stream can’t make a web page: the width and height can’t be changed because they can be side by side. Therefore, it is necessary to depart from the standard stream.

There are three methods in css to make an element out of the standard document flow, namely floating and absolute positioning, and fixed positioning.