【无标题】

最新推荐文章于 2025-06-06 17:58:26 发布

一方1

最新推荐文章于 2025-06-06 17:58:26 发布

阅读量134

点赞数

文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/m0_67737085/article/details/127202100

版权

总结：

display:block;行内元素转换为块级元素

display：inline；块级元素转换为行内元素

display：inline-block；既是行内元素又是块级元素，是块元素，但可以内联，在一行。

display:none;清除元素

float：left；浮动，既可以向左，也可以向右，浮动的盒子既可以向左，也可以向右，直到它的外边缘碰到包含框或另一个浮动框为止。

clear:both;清除浮动

1.块级元素和行内元素

1.块级元素：独占一行

h1~h6
p
div
列表。。。。

2.行内元素：不独占一行，可以被包含在块级元素内，反之不可以

span
a
img
strong......

2.display的应用

1.先引入一个代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px red solid;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px red solid;
        }
    </style>
</head>
<body>
<div>div块级元素</div>
<span>span行内元素</span>
</body>
</html>

代码结果如下：
在这里插入图片描述
我们看到块级元素和行内元素的区别在于设置的宽高对于块级元素有用，而行内元素有多少文本便存在多少。
2.那么display便可以突破这种局限。
display：block；可以把行内元素变为块级元素。

display：inline；块级元素转换为行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px red solid;
            display:inline;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px red solid;
            display: block;
        }
    </style>
</head>
<body>
<div>div块级元素</div>
<span>span行内元素</span>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I3uzoFPB-1665188576043)(C:\Users\wang5\AppData\Roaming\Typora\typora-user-images\image-20221007170636265.png)]
这里加入了display便使行内元素转换为块级元素了,块级元素转换为了行内元素。

3.浮动

float：left；浮动，既可以向左，也可以向右，浮动的盒子既可以向左，也可以向右，直到它的外边缘碰到包含框或另一个浮动框为止。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            border: 1px red solid;

        }
        div{
            margin: 10px;
            padding: 5px;
        }
        .p1{
            border: 1px yellow solid;
            display: inline-block;
            float: left;
        }
        .p2{
            border: 1px yellow solid;
            display: inline-block;
            float: left;
        }
        .p3{
            border: 1px yellow solid;
            display: inline-block;
            float: left;
        }
        .p4{
            border: 1px red dashed;
            font-size: 12px;
            line-height: 23px;
            display: inline-block;
        }
    </style>
</head>
<body>
<div id="father">
    <div class="p1"><img src="tupian/1.png" alt=""></div>
    <div class="p2"><img src="tupian/2.png" alt=""></div>
    <div class="p3"><img src="tupian/3.png" alt=""></div>
    <div class="p4">
        浮动的盒子既可以向左，也可以向右，直到它的外边缘碰到包含框或另一个浮动框为止
    </div>
</div>
</body>
</html>