In HTML and CSS, elements can be divided into three categories: block-level elements (Block-level Elements), inline elements (Inline Elements) and inline block-level elements (Inline-block Elements).
Block-level Elements:
1. The block-level element is displayed in the form of a block on the page. It will occupy a whole line (from left to right) and it will wrap automatically.
2. Block-level elements are usually used to build the structure of the page, such as paragraphs, titles, lists, divs, etc.
3. Common block-level elements include div, p, h1~h6, ul, ol, li, form, etc.
Inline Elements:
1. The inline element only occupies the space contained in the border of its corresponding label, and it will not force a line break.
2. Inline elements are generally used to wrap text or insert some special elements into the text, such as emphasis, links, pictures, etc.
3. Common inline elements include span, a, strong, em, img, br, input, etc.
Inline-block Elements:
1. The inline block element combines the characteristics of block-level elements and inline elements. It will be displayed in the form of a block, but it will not force a line break and can be on the same line as other elements.
2. Inline block elements can set width, height, inner and outer margins, etc., which are different from inline elements.
3. Common inline block elements include img, button, input, label, etc.
Mutual conversion:
1. Convert block-level elements to inline elements:
Use the display: inline; CSS attribute to convert block-level elements into inline elements.
div {
display: inline;
}
2. Convert inline elements to block-level elements:
Use the display: block; CSS attribute to convert inline elements into block-level elements.
span {
display: block;
}
3. Convert inline elements to inline block elements:
Use the display: inline-block; CSS property to convert inline elements into inline block elements.
span {
display: inline-block;
}