CSS entry notes seven: element display mode

There are many tags in html, which can be divided into inline elements and block elements according to their display characteristics .

Common block elements : <div>, <ul>, <ol>, <li>, <p>, <h1>- <h6> the like, where div is typical.

Features of block elements:

1. Exclusive line
2. Height, width and inner and outer margins can be controlled
3. Broadband default is 100% of the container
4. It is a container and box, inside or block elements can be released

Note:
Block elements can no longer be used in text elements, such as <p>, <h>cannot be placed inside <div>.

Common elements within the line : <a>, <strong>, <em>, <span>and so on, which <span>is typical.

Features of inline elements :
1. Adjacent inline elements can be displayed on the same line.
2. Cannot set the width and height
3. The default width is the width of its own content
4. Inline elements can only accommodate text or other inline elements

In addition to the above two basic display mode, there is a call within the line block of the display mode, such labels <img>, <input>, <td>and the like. They also have the characteristics of inline elements and block elements.

Features :
1. The adjacent inline elements (inline blocks) can be displayed on the same line, but there will be gaps between each other, and multiple inline elements can be displayed in one line.
2. The default height and width are the width and height of its own content
3. You can modify the width and height and inner and outer margins

Insert picture description here

Inline elements are transformed into block elements: display:block. Block elements are transformed into inline elements: display:inline. Inline
block elements are transformed: display:inline-block.

Guess you like

Origin blog.csdn.net/m0_52021758/article/details/113053297