Block-level elements (blocks) and inline elements (inline) in CSS

There are 3 basic positioning mechanisms in CSS:
Normal flow (relative positioning is actually considered as part of the normal flow positioning model)
Float (float)
Absolute positioning (fixed positioning is a kind of absolute positioning)
So before learning to float, we need to understand block-level elements and inline elements (inline elements).
block-level elements: block-level elements are generally used as containers, which can accommodate inline elements as well as block-level elements such as DIV and P.
Common block-level elements:
(1) Div: Mainly used for frame layout.
(2) H1~h6: Used to set different levels of headings.
(3) P: Creates a paragraph that automatically creates some whitespace before and after it.
(4) HR: Used to create separation first.
(5) OL: Create an ordered list.
(6) UL: Create unordered list.
features of block-level elements:
1. Block-level elements can accommodate both inline elements and block-level elements.
2. Block-level elements are exclusive on a single line in the default case.
3. Block-level element size can be controlled, CSS can be width and height to set the height and width. The width default value is 100% of the container's width.
4. Block-level elements can set the margin and padding properties.
5. Block-level element corresponding to the attribute Display:block;
Inline element: Any visible element that is not a block-level element is an inline element. Inline elements can only accommodate text or inline elements.
Common inline elements:
(1) Strong: bold emphasis.
(2) EM: italic emphasis.
(3) S: Strikethrough.
(4) U: underline.
(5) A: hyperlinks.
(6) Span: a common row level that defines inline elements in a document.
(7) img: Picture.
(8) Input: Form.
features of inline elements:
1. Inline elements can, by default, be on one line with other inline element elements.
2. Inline elements By default the size is not controllable.
3. Inline elements can produce line breaks and spaces.
4. Inline element correspondence attribute Display:inline;
5. Inline elements can only hold text or inline elements.
The margin and padding properties of the inline element, the horizontal padding-left,padding-right,margin-left,margin-right all produce the margin effect, but the vertical direction of the padding-top, Padding-bottom,margin-top,margin-bottom does not produce a margin effect.
Display:inline-block: You can have elements that have block-level elements and attributes of inline elements-you can set the length-to-width, allow padding and margin to take effect, and side-by-line with other inline elements.

Block-level elements (blocks) and inline elements (inline) in CSS