• margin 塌陷bug 触发bfc


    1.bfc block format context

    2.如何触发一个盒子的bfc

      position:absolute;

      display: inline-block

      float:left/right;

      overflow:hidden;

    <html>
    <head>
        <link rel="stylesheet" href="cs2.css">
    </head>
    <body>
        <div class="wapper">
            <div class="content"></div>
        </div>
      
    </body>
    </html>
    

    2.css 代码

    *{
        margin: 0;
        padding: 0;
    }
    .wapper{
         100px;
        height: 100px;
        margin-left: 100px;
        margin-top: 100px;
        background-color: black;
    }
    
        /* overflow: hidden; */
        /* position:absolute; */
        /* display: inline-block */
       
        /* border-top: 1px solid red; */
    
    .content{
        margin-left: 50px;
        margin-top: 50px;
         50px;
        height: 50px;
        background-color: green;
    }
    

     3. margin 合并问题

    <html>
    <head>
        <link rel="stylesheet" href="cs2.css">
    </head>
    <body>
        <!-- margin 合并问题 -->
        <div class="demo1">1</div>
        <div class="wapper">
            <div class="demo2">2</div>
        </div>
       
    
    </body>
    </html>
    

    3. css

    *{
        margin: 0;
        padding: 0;
    }
    .demo1{
        background-color: red;
        margin-bottom: 100px;    
    }
    .demo2{
        background-color: green;
        margin-top: 100px; 
    }
    /* margin 合并问题 */
    .wapper{
        overflow: hidden;
    }

     4.结论 margin问题一般不解决,直接设置margin-bottom:200px;

  • 相关阅读:
    2020.4.10个人总结
    CG-CTF simple machine
    CG-CTF Our 16bit wars
    CG-CTF Our 16bit Games
    CG-CTF single
    CG-CTF WxyVM2
    Go Channel 详解
    Go语言TCP Socket编程
    golang mysql demo
    YouCompleteMe unavailable: requires Vim compiled with Python 2.x support
  • 原文地址:https://www.cnblogs.com/gylhaut/p/10035738.html
Copyright © 2020-2023  润新知