17 display 和 浮动

display
可以使得行内元素和块元素相互转换，但不常用，用float！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        inline:
        block:
        inline-block:
        */

        div{
            width: 100px;
            height: 100px;
            border: red 1px solid;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: red 1px solid;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
</html>

浮动 float
使得元素浮起来，分层次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            width: 100px;
            height: 100px;
            border: red 1px solid;
            display: inline-block;
            float: left;
        }
        .d2{
            width: 100px;
            height: 100px;
            border: red 1px solid;
            display: inline-block;
            float: right;


        }
        /*clear: both:变成块元素了;*/
        .d3{
            width: 100px;
            height: 100px;
            border: red 1px solid;
            display: inline-block;
            float: right;
            clear: both;
        }

    </style>
</head>
<body>
<div>
    <div class="d1"><img src="images/爱莉希雅.jpg" alt="">d1</div>
    <div class="d2"><img src="images/爱莉希雅.jpg" alt="">d2</div>
    <div class="d3"><img src="images/爱莉希雅.jpg" alt="">d3</div>

</div>
</body>
</html>
posted @ 2023-09-20 08:45  被占用的小海海  阅读(3)  评论(0)  编辑  收藏  举报