Inline elements and block elements of CSS

1. concept:

In-Row Element: an inline element. It can only contain text or other inline elements. Common inline elements include <span>, <A>, and <input>.

Block Element: generally starting from a new line, it can hold text, other inline elements and other block elements. Even if the content cannot be full, the block element must fill the entire line, common elements include <div> and <p>

In this way, we can understand:An element in a row occupies only the width of its content and does not occupy the entire row.The block element occupies the entire line regardless of its content and is displayed in a line break.

: You can quickly understand the knowledge of In-row elements and In-block elements by comparing the concepts of In-row elements and block elements.

2. Differences between intra-row elements and block elements

• The element in the row only occupies the width of the content. The content of the block element must be full regardless of the content.
• In-row elements can only contain text and other in-row elements. Block elements can contain text, in-row elements, and block elements (related to browser version and type)
• Some CSS attributes do not take effect for intra-row elements, such as margin, left, right, width, and height. We recommend that you use block element positioning as much as possible. (Related to browser version and type)

3. interchanging of In-row elements and block elements

For example: Display: inline ---> convert to line element (such as Div)

. D1 {
Background-color: Silver;/* My first div is changed to a row element */
Display: inline;
}

Display: block ----> convert to block elements (such as)

A {
Display: block;
Background-color: yellow;/* the link to my home page becomes a block element */
}

4. standard and non-standard streams

• Stream: In reality, it is a flow of water. In webpage design, it refers to the arrangement of element labels.
• Standard stream: an element appears in front of the element (TAG) content on a webpage, and behind the Element Content
• Non-standard stream: When an element label is out of the standard stream (such as relative positioning) arrangement, we collectively refer to the non-standard stream arrangement.