CSS display与浮动，一看就明白

最新推荐文章于 2023-02-26 19:54:28 发布

思诚代码块

最新推荐文章于 2023-02-26 19:54:28 发布

阅读量625

点赞数 1

分类专栏： CSS 系列笔记+源码展示文章标签： css 前端网页

本文链接：https://blog.csdn.net/weixin_47556601/article/details/122794177

版权

CSS 系列笔记+源码展示专栏收录该内容

19 篇文章 4 订阅

订阅专栏

大家好，今天给大家分享一下CSS display与浮动

写源码：

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

看效果：
在这里插入图片描述

  span{
            width: 100px;
            height: 100px;
            border: 1px solid red ;
            display: block;
        }

看效果：
在这里插入图片描述
看源码：

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

效果：

在这里插入图片描述
下面给大家讲一下浮动

看html源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="father">
    <div class="layer01"><img src="images/aaa.png" alt="/"></div>
    <div class="layer02"><img src="images/bbb.png" alt="/"></div>
    <div class="layer03"><img src="images/ccc.png" alt="/"></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动
    </div>
</div>
</body>
</html>

创建css文件

div {
    margin: 10px;
    padding: 5px;
}
#father {
    border: 1px red solid;
}
.layer01{
    border: 1px blue;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px yellow;
    display: inline-block;
    float: right;
}
.layer03{
    border: 1px blueviolet;
    display: inline-block;
    float: right;
    font-size: 23px;
    line-height: 10px;
}
.layer04{
    border: 1px greenyellow;
    display: inline-block;
    float: right;
    clear: both;


}

看效果：
在这里插入图片描述
好了，CSS display与浮动就到这里了，谢谢大家

思诚代码块

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
CSS display与浮动，一看就明白

大家好，今天给大家分享一下CSS display与浮动写源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px;
复制链接

扫一扫