zoukankan      html  css  js  c++  java
  • 盒子嵌套带来的margin塌陷问题的6种解决办法

    在嵌套盒子中给子盒子设置一个margin-top后,会传递给父级元素,带来marin塌陷问题

    <style type="text/css" rel="stylesheet">
            body{
                margin:0;
                padding:0;
            }
            *{
                box-sizing:border-box;
            }
            .wrap{
                200px;
                height:200px;
                background-color:darkgrey;
            }
            .inner{
                100px;
                height:100px;
                background-color:blanchedalmond;
                margin-top:30px;
            }
        </style>
    <body>
        <div class="wrap">
            <div class="inner"></div>
        </div>
    </body>
    

    效果如图所示

    6中解决方法

    1.给父盒子添加border(添加border之后,父子元素就不是真正意义上的贴合)

    <style type="text/css" rel="stylesheet">
            body{
                margin:0;
                padding:0;
            }
            *{
                box-sizing:border-box;
            }
            .wrap{
                200px;
                height:200px;
                background-color:darkgrey;
                border:1px solid greenyellow;
            }
            .inner{
                100px;
                height:100px;
                background-color:blanchedalmond;
                margin-top:30px;
            }
        </style>
    <body>
        <div class="wrap">
            <div class="inner"></div>
        </div>
    </body>
    

    效果如图所示

    2.给父盒子设置padding-top

    <style type="text/css" rel="stylesheet">
            body{
                margin:0;
                padding:0;
            }
            *{
                box-sizing:border-box;
            }
            .wrap{
                200px;
                height:200px;
                background-color:darkgrey;
                padding-top:10px;
            }
            .inner{
                100px;
                height:100px;
                background-color:blanchedalmond;
                margin-top:30px;
            }
        </style>
    <body>
        <div class="wrap">
            <div class="inner"></div>
        </div>
    </body>
    

    效果如图所示

    3.给父盒子添加overflow:hidden

    <style type="text/css" rel="stylesheet">
            body{
                margin:0;
                padding:0;
            }
            *{
                box-sizing:border-box;
            }
            .wrap{
                200px;
                height:200px;
                background-color:darkgrey;
                overflow:hidden;//触发BFC
            }
            .inner{
                100px;
                height:100px;
                background-color:blanchedalmond;
                margin-top:30px;
            }
        </style>
    <body>
        <div class="wrap">
            <div class="inner"></div>
        </div>
    </body>
    

    效果如图所示

    4.父盒子:position:fixed;

    <style type="text/css" rel="stylesheet">
            body{
                margin:0;
                padding:0;
            }
            *{
                box-sizing:border-box;
            }
            .wrap{
                200px;
                height:200px;
                background-color:darkgrey;
                position:fixed;
            }
            .inner{
                100px;
                height:100px;
                background-color:blanchedalmond;
                margin-top:30px;
            }
        </style>
    <body>
        <div class="wrap">
            <div class="inner"></div>
        </div>
    </body>
    

    效果如图所示

    5.父盒子:display:table;

    <style type="text/css" rel="stylesheet">
            body{
                margin:0;
                padding:0;
            }
            *{
                box-sizing:border-box;
            }
            .wrap{
                200px;
                height:200px;
                background-color:darkgrey;
                display:table;
            }
            .inner{
                100px;
                height:100px;
                background-color:blanchedalmond;
                margin-top:30px;
            }
        </style>
    <body>
        <div class="wrap">
            <div class="inner"></div>
        </div>
    </body>
    

    效果如图所示

    6.利用伪元素给子元素的前面添加一个元素

    <style type="text/css" rel="stylesheet">
            body{
                margin:0;
                padding:0;
            }
            *{
                box-sizing:border-box;
            }
            .inner:before{
                content:"";
                overflow:hidden;
            }
            .wrap{
                200px;
                height:200px;
                background-color:darkgrey;
                display:table;
            }
            .inner{
                100px;
                height:100px;
                background-color:blanchedalmond;
                margin-top:30px;
            }
        </style>
    <body>
        <div class="wrap">
            <div class="inner"></div>
        </div>
    </body>
    

    效果如图所示

  • 相关阅读:
    想算法无头绪,咋办?
    使用R语言分析股价波动
    cmd控制台 wrapper | OpenSCManager failed
    Ubuntu使用vi命令时,不能正常编辑文件,使用方向键时老是出现很多字母解决方案
    Ubuntu su命令 Authentication failure的解决办法
    Springboot2.x整合RabbitMQ
    RabbitMQ 笔记
    Ubuntu安装RabbitMQ
    使用xshell连接ubuntu
    Java 泛型
  • 原文地址:https://www.cnblogs.com/laijun/p/7474997.html
Copyright © 2011-2022 走看看