zoukankan      html  css  js  c++  java
  • margin塌陷与合并问题

    本文转自: https://blog.csdn.net/Sunshineanl/article/details/70767277

    margin塌陷问题和合并问题都只对垂直方向有效

    1. margin塌陷问题

      这个问题是一个经典的浏览器内核问题。具体表现是当两个元素嵌套到一起时,外层盒模型的margin-top取两个元素中margin-top较大的值。

      因为在正常的情况下内层元素是相对于外层元素进行移动,但是这时内层元素却相对于整个文档进行移动,好像外层元素没有“棚顶”一样,因此叫margin塌陷问题。

      margin塌陷问题触发示例:

      <div class = "wrapper">
          <div class = "content"></div>
      </div>
      
      <!--css代码-->
      .wrapper{
          200px;
          height:200px;
          background-color:red;
          margin-top:100px;
      }
      .content{
          100px;
          height:100px;
          background-color:green;
          margin-top:150px;
      
          <!--此时的margin-top为150px。-->
      }

      我们可以看到:此时的外层元素相对于整个文档的 margin-top = 150px;

      margin塌陷问题解决方法:

      1、给外层元素认为加一个“棚顶”:border。

      这种方法虽然能够解决问题,但是在日常开发中我们不使用它,因为他在外观上对元素进行了改变。

      2、bfc–block format context 块级格式化上下文

      每一个元素都是一个盒子,每一个盒子都符合一定的渲染规则。我们可以通过触发bfc方式,让特定盒子里的渲染规则发生变化。我们要给外层元素加一个特定属性来触发bfc来解决margin塌陷问题。触发bfc的方式有以下四种,我们可以根据实际的需求采用不同的方法。

      overflow:hidden;
      
      display:inline-block;
      
      position:absolute;
      
      float:left;

      2.margin合并问题

      具体表现为两个元素并列时,两者相隔的外边距取的是两者所设置margin的最大值。

      margin合并问题触发示例:

          <div class = 'box1'>box1</div>
          <div class = 'box2'>box2</div>
      
      
      
          <!--css代码-->
          .box1{
              background-color:red;
              margin-bottom:100px;
          }
          .box2{
              background-color:blue;
              margin-top:150px;
              <!--此时两者相隔的外边距为下面的box2所设置的margin-top:150px。-->
          }

      margin合并问题解决办法:

      我们仍然用bfc来解决。可以给其中一个元素包起来,在外层元素中设置bfc渲染规则。此时这个元素的渲染规则就改变了,就能够解决这个问题。

      一般margin合并不解决,margin塌陷要解决

  • 相关阅读:
    hmailserver
    用数据库管理SERV-U的用户时,如何修改密码及原理
    一个jquery的图片下拉列表 ddSlick
    图片下拉列表
    mvc 用户控件 ascx 获取 View 页面的值
    asp.net mvc 通过修改路由规则来实现页面的URL多参数传递
    tips
    让ie6/7/8兼容css3的圆角阴影等特殊效果的方法 PIE1.0.0及placeholder在这些IE下生效的方法
    IE8下ckeditor无法正常使用,提示"例外被抛出且未被接住"的解决办法
    iis6 下发布MVC2项目的方法
  • 原文地址:https://www.cnblogs.com/oleolema/p/9419463.html
Copyright © 2011-2022 走看看