Block-level elements (block-level)
-
Monopoly
-
Height, width, outer margin and inner margin can be controlled
-
The default width is 100% of the container (parent width)
-
It is a container and a box in which you can place internal or block-level elements.
-
Block-level elements cannot be placed in p, especially p cannot be placed in div
-
h1 ~ h6, dt, they are all text-type block-level tags, and no other block-level elements can be placed in them.
-
Common block elements are <h1> ~ <h6>, <p>, <div>, <ul>, <ol>, <li>, etc.
The label is the most typical block element.
Inline-level
-
Multiple lines can be displayed.
-
The direct setting of height and width is invalid.
-
The default width is the width of its own content.
-
Inline elements can only hold text or other inline elements.
-
No more links can be placed in the link
-
In special cases, block-level elements can be placed in a, but it is safest to switch a-block mode to a.
-
Common inline elements are <a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <span>, etc., where the tags are the most typical Inline elements. Some places also become inline elements
Inline-block elements
-
It is on the same line as the adjacent line element (inline block), but there will be a gap between them. One line can display multiple
-
The default width is the width of its own content.
-
Height, line height, outer margin and inner margin can be controlled.
-
There are several special tags in the inline elements-<img />, <input />, <td>, you can set the width and height and alignment attributes on them, some materials may call them inline block elements.
| Element mode | Element arrangement | Set style | Default width | contain |
|---|---|---|---|---|
| Block-level element | Only one block-level element can be placed on a line | Can set width height | 100% of the container | Container level can contain any tags |
| Element in line | You can put multiple elements in a row | It is not possible to set the width and height directly | The width of its content | Accommodate text or other inline elements |
| Inline block element | Put multiple inline block elements in one line | Can set width and height | The width of its content |
Label display mode conversion display
- Within the block transition: display: inline;
- In-line conversion: display: block;
- Blocks, inline elements are converted to inline blocks: display: inline-block;
