Classification of basic HTML elements

Block level elements display: block/table

Common block level elements: div h1-h6 p ul Li OL table form tr TD thCopy the code

Characteristics of block-level elements

  1. An exclusive line, regardless of the width of its content, will default to the width of the parent element

    <! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .parent {
            width: 400px;
        }
        .child {
            height: 100px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        <div>I'm the element under child</div>
    </div>
   
</body>
</html>
Copy the code

    Set the width of parent to 400px and the child element will be 400px wide and not on the same line as the following div element

Note: No matter what the width of a block-level element is set to, it will always have a row to itself

  1. Block-level element allowed to set the width, height, margin, padding, boder

    <! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background-color: pink;
            padding: 3px;
            border: 2px solid blue;
            margin: 4px;
        }
    </style>
</head>
<body>
    <div class="demo">
    </div>
</body>
</html>
Copy the code

  1. In general, block-level elements can contain block-level elements, inline elements

    <! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background-color: pink;
            padding: 3px;
            border: 2px solid blue;
            margin: 4px;
        }
    </style>
</head>
<body>
    <div class="demo">
        <div>I'm a block-level element</div>
        <span>I'm an inline element</span>
    </div>
</body>
</html>
Copy the code

Inline elements

display: inline;

Common inline elements

a em b br img label span
Copy the code
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <a href="">A label</a>
    <em>I</em>
    <b>the</b>
     <label>I'm the label label</label>
    <img src="./cat.jpg" alt="">
    <span>I'm span</span>
   
</body>
</html>
Copy the code

Characteristics of inline elements:

  1. You can’t have a single row, but line up with other elements. The width and height are determined by the size of the element’s content
  2. In general, set width and height for inline elements. Set border instead
  3. Padding-left,padding-right,margin-left, and margin-rigth are valid for inline elements, while padding-top,padding-bottom,margin-top, and margin-bottom are not Generating margin effect
  4. Inline elements can only contain text or inline elements, and inline block elements cannot contain block-level elements
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        a.span {
            width: 300px;
            height: 100px;
            background-color: #ddd;
            margin: 200px 100px;
            padding: 150px 50px;
            border: 3px solid red;
        }
    </style>
</head>
<body>
   
    <span>I'm span</span>
    <a>I'm tag A</a>
    
</body>
</html>
Copy the code

Effect:

Margin-top /bottom does not apply, margin-left/right does not apply, padding-left/right does not apply, padding-top does not apply. Padding-bottom does not create margin effects on inline elements.

Padding -bottom for inline elements does not produce margin effects

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        a.span {
            width: 300px;
            height: 100px;
            background-color: #ddd;
            padding: 150px 50px;
            border: 3px solid red;
        }
    </style>
</head>
<body>
   
    <span>I'm span</span>
    <a>I'm tag A</a>
    <div>I'm a div element below the inline element. I'm a div element below the inline element</div>
</body>
</html>
Copy the code

Effect:

Padding-bottom does not create margin effect, but does not create border-top effect.

Let’s look at another example

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .demo {
            width: 100px;
            height: 150px;
            background-color: green;
        }
        span.a {
            width: 300px;
            height: 100px;
            padding: 150px 50px;
            border: 3px solid red;
        }
    </style>
</head>
<body>
    <! <div class="demo"> </div>
    <span class="index">I'm span</span>
    <a class="index">I'm tag A</a>
</body>
</html>
Copy the code

Effect:

Border-top is still not in effect

Uncomment the div element above

You can see that the border-top of the span tag is not in effect, but is not in the current viewport area. The span tag is empty with a 150px height, which is exactly the height of the padding-top. When the div element is set to 150px, Use the previously empty 150px height, so the border-top is visible.

Paddin-bottom /top summary of paddin-bottom/top for inline elements:

  1. The corresponding height area will be set aside
  2. But in this area, no margin effect is generated (brother nodes can be rendered in this area)

Why can img tag set width and height?

Img is an inline element. Inline elements cannot set width and height, but img can set width and height

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
        }
    </style>
</head>
<body>
   <img src="./cat.jpg">
</body>
</html>
Copy the code

Replaceable element

The content of the replaceable element is not affected by the current CSS style. CSS can affect its rendering position, but not the content of the replaceable element itself, which is determined by its tags and attributes

Substitutable elements generally have internal dimensions so they have width and height, which you can set. When img width and height are not specified, they are displayed as their intrinsic dimensions, that is, the width and height of the image when it was saved.

The img element is a replacement element. The contents of the IMG element are determined by SRC and Alt and have an internal size, so you can set the size.

Inline block elements

dispaly:inline-block;

Common inline block elements

select  textarea input 
Copy the code
<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
       input,select,textarea {
           width: 200px;
           height: 100px;
           margin: 10px;
           padding: 10px;
       }
       textarea {
           /* Set textarea to align with input and select */
           vertical-align: middle;
       }
    </style>
</head>

<body>
    <input type="text" placeholder="Please enter the content">
    <textarea name="textarea" id="" cols="30" rows="10"></textarea>
    <select name="select" id="select"></select>
    <span>I'm a SPAN element</span>
    <div>I'm a div element</div>
</body>

</html>
Copy the code

Features:

  1. Display on the same line as adjacent inline elements and inline block elements, not on the same line as block-level elements
  2. The default width is the width of the content itself
  3. Width, height, line height, margins, and margins can all be set manually