Front-end webpage learning 5 (css element display mode)

Element display mode

Element display mode definition

Element display mode: In what way is the element label displayed.

Blocks and inline elements

Block element
 <h><p><ul><ol><div>
 One line alone
 Height, width, outer margin and inner margin can be controlled.
 The default width is a container (100% of the parent level)
 It is a container or a box, and block-level elements can be placed
 Block-level elements cannot be placed in text classes, such as p/h
inline elements (inline elements)
 In adjacent lines One line can occupy multiple elements
 The height and width setting is invalid
 The default width is its own width
 Intelligently accommodate text and other in-line elements
 Links can no longer be linked
 In special cases a can be placed in block-level elements
block-in-line elements
 <img/>,<input/><td>
 Can be multiple lines , But there are gaps.
 The default width is itself
 The width, line height and margin can be set.

Element display mode conversion

Element display mode conversion:
 Use: increase the trigger range of a
 Display: block
 Display: inline
 Display: inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素显示模式的转换</title>
    <style>
        /* div是块元素，span是行内元素，a是行内元素 */
        .div1 {
    
    
            background-color: gold;
            /* 显示观察盒子的大小 */
            width: 100px;
            /* 盒子宽 */
        }
        .div2 {
    
    
            background-color: gold;
            /* 显示观察盒子的大小 */
            width: 100px;
            /* 盒子宽 */
            display: inline;
        }
        .a1 {
    
    
            background-color: gold;
            /* 显示观察盒子的大小 */
            width: 100px;
            /* 盒子宽 */
        }
        .a2 {
    
    
            background-color: gold;
            /* 显示观察盒子的大小 */
            width: 100px;
            /* 盒子宽 */
            display: block;
        }
        .span1 {
    
    
            background-color: gold;
            /* 显示观察盒子的大小 */
            width: 100px;
            /* 盒子宽 */
        }
        .span2 {
    
    
            background-color: gold;
            /* 显示观察盒子的大小 */
            width: 300px;
            /* 盒子宽 */
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div1">div1</div>
    <br/>
    <div class="div2">div2</div>
    <div class="div2">div2</div>
    <br/>
    <a href="#" class="a1">a1</a>
    <a href="#" class="a1">a1</a>
    <br/>
    <a href="#" class="a2">a2</a>
    <a href="#" class="a2">a2</a>
    <br/>
    <span class="spa1">spa1</span>  
    <span class="spa1">spa1</span>   
    <br/>
    <span class="spa2">spa2</span>
    <span class="spa2">spa2</span> 
    <br/>  
</body>
</html>

display