CSS学习14之display和浮动

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

小黑神zxs

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

阅读量608

点赞数 1

分类专栏： CSS3详解文章标签： css3 html 前端 css浮动及display idea

本文链接：https://blog.csdn.net/zxs1002/article/details/122969181

版权

CSS3详解专栏收录该内容

18 篇文章 0 订阅

订阅专栏

Display和浮动

display 属性

display 属性是用于控制布局的最重要的 CSS 属性。
display 属性规定是否/如何显示元素。

每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。

浮动和清除浮动

CSS 布局 - 浮动和清除
CSS float 属性规定元素如何浮动。
CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

示例

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display和浮动</title>
    <style>
        #块元素{
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        #行内元素{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
    <link rel="stylesheet" href="css/浮动.css">

</head>
<body>

<div id="块元素">
    div块元素
</div>

<span id="行内元素">
    span行内元素
</span>
<hr>
<div id="father">

    <div class="text01"><img src="images/动漫高冷女tx.jpeg" alt=""></div>
    <div class="text02"><img src="images/桐老爷tx.jpeg" alt=""></div>
    <div class="text03"><img src="images/动漫呆萌tx.jpeg" alt=""></div>
    <div class="text04"><p>浮动的盒子模型可以向左浮动，也可以向右浮动，直到它的外边缘到包含框或者另一个浮动的盒子</p></div>

</div>

</body>

浮动css

#father{
    margin: 10px;
    padding: 5px;
    border: 2px solid red;
    overflow: hidden;
}
.text01{
    margin: 10px;
    padding: 5px;
    border: 2px solid red;
    display: inline-block;
    float: left;
}
.text02{
    margin: 10px;
    padding: 5px;
    border: 2px solid red;
    display: inline-block;
    float: left;
}
.text03{
    margin: 10px;
    padding: 5px;
    border: 2px solid red;
    display: inline-block;
    float: right;
}
.text04{
    margin: 10px;
    padding: 5px;
    border: 2px solid red;
    font: 14px bold;
    line-height: 20px;
    display: inline-block;
}

效果

块元素和行内元素
在这里插入图片描述
浮动

作者有话说

博客创作不易，希望看到这里的读者动动你的小手点个赞，如果喜欢的小伙伴可以一键三连，作者大大在这里给大家谢谢了。

小黑神zxs

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习14之display和浮动

Display和浮动display 属性display 属性是用于控制布局的最重要的 CSS 属性。display 属性规定是否/如何显示元素。每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。浮动和清除浮动CSS 布局 - 浮动和清除CSS float 属性规定元素如何浮动。CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。示例代码<!DOCTYPE
复制链接

扫一扫