Detailed explanation of display modes in CSS tags

Label display mode (important)

div and span tags

1. The styles are exactly the same, but the labels are different, and the displayed results are completely different

2. Each div will occupy a row, and multiple spans will be arranged in a row

1. Block Elements

Features: The default width is 100%, the default height is 0, the width and height can be set, it will inherit the width of the parent, and it will display in line breaks—div ul li ph

Schematic diagram

Summary: Block elements can add width and height attributes and occupy a single line

2. Row Elements

Features: The default width and height are both 0, width and height cannot be set, one line display ---- span biua

Schematic diagram

Summary: Insensitive to width and height, cannot occupy a single line

3. Block elements within the line

Features: can only set width and height, can not wrap display - img input

Schematic diagram

Learn one more trick: Generally speaking, block elements in a line are also inline elements. Some operations on inline elements can also operate on block elements in a line, for example: text-align:center;line-height:1000px;

4. Mode conversion

Syntax: display:值

Value: block turns into a block element, inline turns into a row element, inline-block turns into a block element within the row, none hides the element

Learn one more trick: After using this attribute to hide the element, it will not occupy space on the page

Small case: the production of simple navigation