CSS document stream and block-level element (block) inline element (inline)

Divides the form from top to bottom into one row, and emits elements from left to right in each row, that is, the document stream.

Each non-floating block-level element occupies only one row, while the floating element floats at one end of the row as required. If the current row cannot accommodate it, a new row will be floated.

The inline element does not exclusive a row. Almost all elements (including block-level, inner-join, and list elements) can generate child rows for placing child elements.

In three cases, elements are separated from the document stream, which are floating, absolute, and fixed.

 

Based on the document stream, we can easily understand the following positioning modes:

Relative positioning, that is, offset relative to the position of the element in the document stream. However, the original placeholder is retained.

Absolute positioning, that is, it is completely out of the document stream, and offset relative to the last parent element of the non-static value of the position attribute.

Fixed positioning, that is, it is completely out of the document stream and offset relative to the video area.

The text in the CSS authoritative guide shows that any visible element that is not a block-level element is an inline element. Its performance is in the form of "row layout", where "row layout" means that its performance is always displayed in rows. For example, when we set an inline element border-bottom: 1px solid #000, it is represented by repeating each line, and there will be a black fine line under each line. If it is a block-level element, the displayed black line will only appear below the block.

A row is an element in a row and can only be placed in a row. A block-level element is a four-square block that can be placed anywhere on the page.

2. To put it bluntly, the line element is like a word; the block-level element is like a paragraph. If it is not defined separately, it will appear in an independent line.

3. General block-level elements such as paragraphs <p> and question mark

The distinct feature of the four levels of element-less is that each block-level element is displayed from a new line, and the subsequent element-less must be displayed in another line.

5. <span> The CSS definition belongs to an element in the row, and <div> is a block-level element.

 

It mainly lists some common ones. If you don't know much about them, you can drop them down.

 

Block element)

 

Div dl ul h1 h2 h3 h4 h5 h6 hr ol table

 

Inline element)

 

B img span