zoukankan      html  css  js  c++  java
  • margin塌陷(collapse)

    1.当两个对象为上下关系时,而且都具备margin属性时,上面的margin-bottom与下面的margin-top会发生塌陷

    • 当margin-bottom和margin都为正数时,结果为两者之间的最大值
       <div id="a"></div>
       <div id="b"></div>
      
      
      
      #a{
          background:red;
          150px;
          height:150px;
          margin-bottom:50px;
       }
       #b{
          background:green;
          100px;
          height:100px;
          margin-top:20px;
       }
       
      
      
       
    • 当margin-bottom和margin-top都为负时,结果为两者绝对最较大的那个值。
       <div id="a"></div>
       <div id="b"></div>
      
      
      #a{
          background:red;
          150px;
          height:150px;
          margin-bottom:-50px;
       }
       #b{
          background:green;
          100px;
          height:100px;
          margin-top:-40px;
       }
       
      
       
    • 当margin-bottom和margin-top为一正一负时,结果为两者之和。
      <div id="a"></div>
      <div id="b"></div>
      
      
      #a{
          background:red;
          150px;
          height:150px;
          margin-bottom:-50px;
       }
       #b{
          background:green;
          100px;
          height:100px;
          margin-top:20px;
       } 


    2.当两个对象为上下包含关系

    • 父元素无填充内容,且没有设置border时,子元素的margin-top不会起作用
       <div id="a">
          <div id="b"></div>
       </div>
      
      #a{
          background:red;
          150px;
          height:150px;
       }
       #b{
          background:green;
          100px;
          height:100px;
          margin-top:20px;
       }
    • 父元素设置border属性,子元素的margin-top起作用
      #a{
          background:red;
          150px;
          height:150px;
          border:1px solid #000;
       }
       #b{
          background:green;
          100px;
          height:100px;
          margin-top:20px;
       }
       
      
       <div id="a">
          <div id="b"></div>
       </div>

    • 父元素有填充内容,子元素的margin-top会起作用,当margin-top小于填充内容时,距离为填充内容的高度
      #a{
          background:red;
          150px;
          height:150px;    
       }
       #b{
          background:green;
          100px;
          height:100px;
          margin-top:20px;
       }
       
       <div id="a">liuliu
          <div id="b"></div>
       </div>

    • 解决父元素塌陷的方法还有,为父元素添加overflow:hidden;,或float非none属性,也可为子元素添加float非none属性

    如果有新发现将继续补充。

  • 相关阅读:
    使用C# lock同时访问共享数据
    将两个DataTable合并成一个DataTable
    嵌套存储过程返回值的调用
    在 Sql Server 中使用 MD5 加密
    用DIV制作即时提示层 防止被select控件遮挡的方法
    操作Cookie公用代码
    JS实现回调例子
    ASP存储过程参数数据类型
    在asp中使用js的encodeURIComponent方法
    Uva 10250 The Other Two Trees
  • 原文地址:https://www.cnblogs.com/webliu/p/4720624.html
Copyright © 2011-2022 走看看