HTML can classify elements into inline elements, block elements and inline block elements. First of all, the three can be converted to each other. The display attribute can be used to convert the three arbitrarily:
(1)display:inline; Convert to inline element
(2)display:block; Convert to block element
(3)display:inline-block; Convert to inline block element
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8" />
6 <title>Test case</title>
7 <style type="text/css">
8 span {
9 display: block;
10 width: 120px;
11 height: 30px;
12 background: red;
13 }
14
15 div {
16 display: inline;
17 width: 120px;
18 height: 200px;
19 background: green;
20 }
21
22 i {
23 display: inline-block;
24 width: 120px;
25 height: 30px;
26 background: lightblue;
27 }
28 </style>
29 </head>
30
31 <body>
32 <span>Intra row to block</span>
33 <div>Block to bank transfer </div>
34 <i>Intra bank to intra bank block</i>
35 </body>
36
37 </html>
1. Inline elements
span is the most commonly used element in the line. Other elements are only used under specific functions. They decorate the font < b > and < I > labels, and the < sub > and < sup > labels can directly make the square effect without the help of similar mobile attributes. It is very practical.
In line element characteristics: (1) setting width and height is invalid
(2) for margin, only the left and right directions are valid, and the up and down directions are invalid; The padding setting is effective up, down, left and right, which will expand the space
(3) line wrapping will not be performed automatically
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8" />
6 <title>Test case</title>
7 <style type="text/css">
8 span {
9 width: 120px;
10 height: 120px;
11 margin: 1000px 20px;
12 padding: 50px 40px;
13 background: lightblue;
14 }
15 </style>
16 </head>
17
18 <body>
19 <i>No word wrap</i>
20 <span>Inline element</span>
21 </body>
22
23 </html>
2. Block elements
The representative of block elements is div. other elements such as p, nav, aside, header, footer, section, article, UL Li, address, etc. can be implemented by div. However, in order to facilitate programmers to interpret the code, specific semantic tags are generally used to make the code readable and easy to check errors.
Characteristics of block elements: (1) be able to identify width and height
(2) the up, down, left and right of margin and padding are effective for them
(3) it can wrap automatically
(4) multiple block element labels are written together, and the default arrangement is from top to bottom
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8" />
6 <title>Test case</title>
7 <style type="text/css">
8 div {
9 width: 120px;
10 height: 120px;
11 margin: 50px 50px;
12 padding: 50px 40px;
13 background: lightblue;
14 }
15 </style>
16 </head>
17
18 <body>
19 <i>Auto wrap</i>
20 <div>Block element</div>
21 <div>Block element</div>
22 </body>
23
24 </html>
3. In line block elements
Intra row block elements integrate the characteristics of intra row elements and block elements, but each has its own trade-offs. Therefore, in-line block elements are used more often in daily use due to their characteristics.
Characteristics of block elements in line: (1) no automatic line feed
(2) be able to identify width and height
(3) the default arrangement is from left to right
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8" />
6 <title>Test case</title>
7 <style type="text/css">
8 div {
9 display: inline-block;
10 width: 100px;
11 height: 50px;
12 background: lightblue;
13 }
14 </style>
15 </head>
16
17 <body>
18 <div>Inline block element</div>
19 <div>Inline block element</div>
20
21 </body>
22
23 </html>
In HTML5, programmers can customize labels and add display:block to any defined label; Yes, of course, it can also be in-line or in-line block.