CSS standard document flow

CSS standard document flow

Document flow refers to the arrangement of elements from left to right and top to bottom by default during the layout process of elements.

The document flow can be divided into: block elements and inline elements.

Block element

Features of block elements:

• The block element is on its own line.
• Height, width, inner and outer margins can all be controlled.
• The width defaults to 100% of the parent container.
• Inside you can release inner and block elements.

note:

• Block elements cannot be used in text elements.
• <p>Labels are mainly used to store text, and block elements cannot be placed.

Elements in the line

Features of inline elements:

• Elements in adjacent lines are on one line, and multiple elements can be displayed in one line.
• The width and height cannot be set.
• The default width is the width of its own content.
• Inline elements can only hold text or inline elements.

note:

• <a>Can't be put inside <a>.
• <a>You can put block elements in it, but it <a>is safest to convert them into block elements.

Inline block element

Features of inline block elements:

• Inline block elements have the characteristics of block elements and inline elements at the same time.
• It is on one line with adjacent inline elements (inline blocks), but there is a gap between them. One line can display multiple inline elements (characteristics of inline elements).
• The default width is the width of its own content (characteristics of inline elements).
• Height, width, inner and outer margins can all be controlled (characteristics of block elements).

块元素：
<h1>~<h6> <p> <div> <ul> <ol> <li>

行内元素：
<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>

行内块元素：
<img> <input> <td>