Detailed explanation of display modes in CSS tags

Case diagram

insert image description here

Code

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		a{
            display:inline-block;
            width:100px;
            height:50px;
            background:#f00;
            text-align:center;
            text-decoration:none;
            color:#fff;
            line-height:50px;
        }
		body{text-align:center;}
	</style>
</head>
<body>

<a href="">Navigation</a>
<a href="">Navigation</a>
<a href="">Navigation</a>
<a href="">Navigation</a>
<a href="">Navigation</a>
<a href="">Navigation</a>

</body>
</html>

Summarize

This is the end of this article about the display mode in CSS tags. For more relevant CSS tag display mode content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

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

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

insert image description here

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

insert image description here

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

insert image description here

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

<<: Html comments Symbols for marking text comments in Html

>>: Solution to transparent font problem after turning on ClearType in IE