CSS(六)——display问题行级元素本身不能设置宽高，它是被内容所撑开的。当行级元素（span）想要设计宽高时，可

diaplay的作用：

行级元素本身不能设置宽高，它是被内容所撑开的。当行级元素（span）想要设计宽高时，可以利用display可以把他设置成块级元素或者是行级块元素。块级元素（div）也可以通过display设置成行级块元素。
补充说明：利用浮动也可以为行级元素设置宽高：

 span{
       float: right;
        width: 200px;
        height: 200px; 
        background: pink;
    } 
  <span>Et Aiors最棒！Et Aiors最棒！</span>

效果如下：

当不改变各个元素的display的时候

<style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            height: 2000px;
        }
        div{
            /* float: left; */
            /* display: inline-block; */
            width: 100px;
            height: 100px;
            background: aqua;
        }
         span{
            /* display: block; */
            width: 200px;
            height: 200px;
            background: pink;
        } 
        img{
            /* display: block; */
            width: 50px;
            height: 50px;
        }
        a:hover{
            color: red;
        }
    </style>

</head>
<body>
    <div>hello world</div>
    <span>Et Aiors最棒！Et Aiors最棒！</span>
    <a  href="https://www.baidu.com/" target="_blank" >百度一下，你就知道</a>
    <!-- a标签是行级元素 -->
    <img src="../tmall复习/imgs/TB1YyRjk1T2gK0jSZFvXXXnFXXa-1702-1356.png" alt="">
    <!-- img是行级块元素 -->


</body>

效果如下：

当我们把div改成行级块元素，把span改成块级元素，把img改成块级元素时：

<style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            height: 2000px;
        }
        div{
            /* float: left; */
            display: inline-block; 
            width: 100px;
            height: 100px;
            background: aqua;
        }
         span{
           display: block;
            width: 200px;
            height: 200px;
            background: pink;
        } 
        img{
            display: block; 
            width: 50px;
            height: 50px;
        }
        a:hover{
            color: red;
        }
    </style>

</head>
<body>
    <div>hello world</div>
    <span>Et Aiors最棒！Et Aiors最棒！</span>
    <a  href="https://www.baidu.com/" target="_blank" >百度一下，你就知道</a>
    <!-- a标签是行级元素 -->
    <img src="../tmall复习/imgs/TB1YyRjk1T2gK0jSZFvXXXnFXXa-1702-1356.png" alt="">
    <!-- img是行级块元素 -->


</body>

效果如下：