Html block-level elements and embedded Elements

Example:
Put the following two lines of code into the body tag:
<Div style = "border: 1px solid red;"> div1 </div>
<Div style = "border: 1px solid red;"> div1 </div>
The rendering effect of the browser:
Div1
Div1
These two divs occupy two rows of space, called block-level elements ).
Put the following two lines of code into the body tag:
<Span style = "border: 1px solid red;"> span1 </span>
<Span style = "border: 1px solid red;"> span2 </span>
The rendering effect of the browser:
Span1 span1
These two spans are tied in one row, called inline ).

Differences between block-level elements and embedded elements:
· Block-level elements are used to build website architecture, layout, and carry content, such as div, ul, li, dl, dt, dd, h1-h6, p, address ......
Inline elements are used to modify a row in text, such as a, span, strong, sub, sup, img ......
· The block-level element is a box, and the box is wide or high. No matter how many items are in the box, you can set its width and height externally.
The Inline element is a bag, and its width and height are supported by the inside.
· The code for converting block-level elements and embedded elements is as follows:
Display: block;/* convert to block element */
Display: inline;/* convert to embedded elements */
· CSS calling rules for block-level elements and embedded elements:
1. A block element can contain inline elements or some block elements, but an inline element cannot contain block elements. It can only contain other inline elements:
<Div> <A href = "#"> <span> </a> --
<Span> <div> </span> -- Error
2. There are several special block-level elements that can only contain embedded elements, but cannot contain block-level elements. These special labels are:
H1-h6, p, dt.
<P> <ol> <li> </ol> </p> -- Error
<P> <div> </p> -- Error
3. li can contain div labels, parent ul or ol
Both li and div labels are content-loaded containers with equal status and no level.
4. Parallel Block-level elements and block-level elements, parallel embedded elements and embedded elements:
<Div> <Div> <a href = "#"> </a> <span> </div> --
<Div>