css 常用重要的display、float、z-index

最新推荐文章于 2024-09-05 23:48:57 发布

u010334503

最新推荐文章于 2024-09-05 23:48:57 发布

阅读量118

点赞数

分类专栏： css 文章标签： css html 前端

本文链接：https://blog.csdn.net/u010334503/article/details/130026504

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.display 使用常用：block、inline、inline-block

div标签默认是block ，其他标签可以设置display:block成为块,inline-block 行块

2.float使用是时候，配置margin 调整位置

3.z-index 使用层级属性

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>

<style>
    #root{
        border:red 1px solid;

    }
    #root:after{
        content: "";
        clear: both;
        overflow: hidden;
        display: block;
    }
    #root2{
        border:red 1px solid;
        width: 500px;
        margin: 0 auto;
    }
    #root2:after{
        content: "";
        clear: both;
        overflow: hidden;
        display: block;
    }
    #div12{
        width: 100px;
        height: 100px;
        margin: 0 auto;
        border: 1px violet solid;
        text-align: center;
    }
    #root:after{
        content: "";
        clear: both;
        overflow: hidden;
        display: inline-block;
    }
    #div1{
        width: 100px;
        height: 100px;
        border: 1px violet solid;
        text-align: center;
        position: relative;
        margin-left: 200px;
        float: left;
    }
    #div2{
        width: 50px;
        height: 50px;
        border: 1px violet solid;
        text-align: center;
        float: left;
    }
    #div3{
        width: 70px;
        height: 70px;
        text-align: center;
        border: 1px violet solid;
        position: absolute;
        bottom: 0;
        float: left;
    }
    #div4{
        width: 150px;
        height: 130px; text-align: center;
        float: left;
        position: fixed;
        bottom: 0;
        border: 1px violet solid;
    }
</style>

<body>

<div id="root">

    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>

</div>

<div id="root2">

    <div id="div12">12</div>


</div>
</body>
</html>

u010334503

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 常用重要的display、float、z-index

div标签默认是block ，其他标签可以设置display:block成为块,inline-block 行块。1.display 使用常用：block、inline、inline-block。2.float使用是时候，配置margin 调整位置。3.z-index 使用层级属性。
复制链接

扫一扫

专栏目录