Written in front: refer to the tutorial of Bilibili dark horse programmer pink teacher
Address: https://www.bilibili.com/video/BV14J4114768?t=328&p=26

table of Contents

Key points of label display mode (display)

What is the label display mode

Block-level

Inline-level

Inline-block

The three modes summarize the differences

Label display mode conversion display

Key points of label display mode (display)

What is the label display mode

What is the display mode of the label?

In what way is the label displayed , for example, div occupies a line by itself, for example, a line of span can have many

effect:

There are many tags on our web pages, and different types of tags are used in different places to better complete our web pages.

Type of label (classification)

HTML tags are generally divided into two types : block tags and inline tags , which are also called block elements and inline elements .

Block-level

Common block elements include <h1>~<h6>, <p>, <div>, <ul>, <ol>, <li>, etc., among which the <div> tag is the most typical block element.

Characteristics of block-level elements

More domineering, owning his own line

Height, width, outer margin and inner margin can all be controlled

The default width is 100% of the container (parent width)

It is a container and box, which can release internal or block-level elements

note:

Only text can form a paragraph, so block-level elements cannot be placed in p, especially p cannot be placed in div

Similarly, these tags h1, h2, h3, h4, h5, h6, dt are all text-based block-level tags, and other block-level elements cannot be placed inside .

Case

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			/*背景颜色 不要和 文字颜色混淆了 color*/
			background-color: pink;
		}
	</style>
</head>
<body>
	<div>我是块级元素</div>
	<div>我是块级元素</div>
	<div>
		<strong>文字</strong>
		<h1>标题</h1>
	</div>
	<!-- p里面不能包含 div  段落p h  dt 里面尽量不要放块级元素 -->
	<!-- <p>
		<div>123</div>
	</p> -->
</body>
</html>

Inline-level

Common inline elements are <a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <span>, etc., among which <span> The most typical inline element of the label. Some places are also inline elements

Characteristics of inline elements:

Elements in adjacent rows are on one line, and one line can display multiple

Direct setting of height and width is invalid

The default width is the width of its content

Inline elements can only hold text or other inline elements

note:

No more links in the link

In special cases, block-level elements can be placed in a, but it is safest to switch to block-level mode for a

Inline-block

There are several special tags in inline elements-<img />, <input />, <td>, which can be set width and height and alignment attributes, some materials may call them inline block elements.

Features of inline block elements:

It is on one line with adjacent inline elements (inline blocks), but there will be gaps between them, and one line can display multiple

The default width is the width of its own content .

Height , row height, outer margin and inner margin can all be controlled

Case

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		img {
			width: 200px;
		}
	</style>
</head>
<body>
	<img src="images/3.jpg" alt="">
	<img src="images/3.jpg" alt="">
	<img src="images/3.jpg" alt="">
</body>
</html>

The three modes summarize the differences

Element mode Element arrangement Set style Default width contain

Block element Only one block-level element can be placed in a row You can set the width and height 100% of the container Container level can contain any label

Elements in the line One line can put multiple inline elements Can not directly set the width and height The width of its content Hold text or other inline elements

Inline block element Put multiple inline block elements in one line You can set the width and height The width of its content

Element mode	Element arrangement	Set style	Default width	contain
Block element	Only one block-level element can be placed in a row	You can set the width and height	100% of the container	Container level can contain any label
Elements in the line	One line can put multiple inline elements	Can not directly set the width and height	The width of its content	Hold text or other inline elements
Inline block element	Put multiple inline block elements in one line	You can set the width and height	The width of its content

Label display mode conversion display

Block transfer	display:inline
Loaf in the line	display:block
Blocks, inline elements are converted to inline blocks	display: inline-block

Demo code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		span {
			/*把行内元素转换为块级元素*/
			display: block;
			width: 100px;
			height: 100px;
			background-color: pink;
		}
		div {
			/*把块级元素转换为行内元素*/
			display: inline;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
		a {
			/*转换为 行内块元素*/
			display: inline-block;
			width: 80px;
			height: 25px;
			background-color: orange;
		}
	</style>
</head>
<body>
	<span>行内</span>
	<span>行内</span>

	<div>div 是块级元素</div>
	<div>div 是块级元素</div>
	<a href="#">百度</a>
	<a href="#">新浪</a>
</body>
</html>

(CSS learning record): Key points of label display mode (display)

Key points of label display mode (display)

What is the label display mode

Block-level

Inline-level

Inline-block

The three modes summarize the differences

Label display mode conversion display

Guess you like