CSS常见布局效果

最新推荐文章于 2022-05-08 22:06:25 发布

杭州-前端-求内推

最新推荐文章于 2022-05-08 22:06:25 发布

阅读量377

点赞数

分类专栏： ♚CSS3 & HTML5 文章标签： CSS常见布局左边定宽右边自适应

本文链接：https://blog.csdn.net/ansenamerson/article/details/76652985

版权

♚CSS3 & HTML5 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

左边定宽右边自适应布局

1：左边使用 float，右边使用 margin-left
2：左边使用 absolute，右边使用 margin-left
3：左边和右边同时使用 absolute
4：使用 flex 布局

CSS秘密花园： Sticky Footers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .clearfix {
        display:inline-block;
    }
    .clearfix:after {
        display:block;
        content:'.';
        height:0;
        line-height:0;
        clear:both;
        visibility:hidden;
    }


    .detail {
        position:fixed;
        z-index:99;
        top:0;
        left:0;
        width:100%;
        height:100%;
        overflow:auto;
        background:rgba(7,17,27,0.8);
    }

    .detail-wrapper {
        min-height:100%;
    }

    .detail-main {
        margin-top:64px;
        /*注意：这里必须使用 padding，主要用来放 footer 的内容*/
        padding-bottom:64px;
        color: #fff;
    }


    .detail-close {
        position:relative;
        width:32px;
        height:32px;
        margin:-64px auto 0 auto;
        clear:both;
        font-size:32px;
    }

    .detail-close span {
        display: inline-block;
        width: 32px;
        height: 32px;
        background: red;
    }
    </style>
</head>
<body>
<div class="detail" v-show="detailShow">
    <div class="detail-wrapper clearfix">
        <div class="detail-main">
            <p>你可以在这里自动填充元素的多少以观察效果</p>
        </div>
    </div>
    <div class="detail-close">
        <span></span>
    </div>
</div>
</body>
</html>