I Block labels, inline labels, and inline block labels
1. Block label:
(1) Definition: Generally speaking, when writing code, there will be a large box, square box, which can be displayed on the page.
(2) Features:
< 1> The height, width, row height and top and bottom margins of elements can be set;
< 2> Each block element occupies a separate line. If other elements are entered in the next year, another line will be created;
< 3> If the width is not set, its default width is 100%, which is the width of the parent element by default.
(3) Representative elements: div, ul, li, ol, h1~h6, p, hr, ol, form and other elements
(4) The code is as follows:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title></title> 7 <style type="text/css"> 8 div{ 9 width: 300px; 10 height: 300px; 11 background: lightblue; 12 } 13 14 </style> 15 </head> 16 <body> 17 18 <div>I am div</div><div>I am div</div> 19 <h1>I am h1</h1> 20 <h2>I am h2</h2> 21 <h3>I am h3</h3> 22 <p> I am p</p> 23 </body> 24 </html>
2. In line label:
(1) Definition: if a label appears with another label, the two elements will appear on one line.
(2) Features:
< 1> The height, width, row height and top bottom margin of an element cannot be set;
< 2> In line elements can coexist on the same line with their elements;
< 3> The width and height of the elements in the line are expanded by the content.
(3) Representative elements: a, span, em, strong, b, i, u, label, br and other elements
(4) The code is as follows:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title></title> 7 <style type="text/css"> 8 9 span{ 10 width: 300px; 11 height: 300px; 12 background: lightgreen; 13 } 14 15 16 <span>I am span</span><span>I am span</span> 17 <a href="">I'm a hyperlink a</a> 18 19 </body> 20 </html>
3. Inline block label:
(1) Definition: the combination of intra row and block level points can not only take effect on width and height attribute values, but also display multiple labels in one row.
(2) Features:
< 1> Width and height can be set;
< 2> In line elements can be on the same line as their elements ；
(3) Representative elements: IMG, input, textear and other elements
(4) The code is as follows:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> input{ width: 400px; height: 50px; } </style> </head> <body> <input type="text" name=""> <input type="text" name=""> </body> </html>
4. Conversion between various labels
(1) : convert block level labels to inline labels: display:inline;
(2) : convert inline labels to block level labels: display:block;
(3) : convert to inline block label: display: inline block;
5. Differences between labels
(1) : block label: occupy one line alone and set the width and height values;
(2) : line label: displayed in one line; width and height cannot be set;
(3): In line block label: it can stay in the same line with other elements and set width and height;