Row block attribute of Css

    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;

 

 

Posted on Mon, 08 Nov 2021 01:44:53 -0500 by vincente