`
yxc_gdut
  • 浏览: 97449 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

margin折叠

阅读更多

 

    margin折叠在布局中经常发生,需要知道margin折叠触发规则和它遵循什么规则计算距离

    

margin折叠的规则

  1. 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
  2. 浮动元素/inline-block的元素/绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
  3. 创建了块级格式化内容的元素,不和它的子元素发生margin折叠
  4. 元素自身的margin-bottom和margin-top相邻时也会折叠
B
<div style="border:1px solid red; width:100px;">
  <div style="margin:50px 0; background-color:green; height:50px; width:50px;">
    <div style="margin:20px 0;">
      <div style="margin:100px 0;">B</div>
    </div>
  </div>
</div>

margin collapsing

  1. 上边距只要不设置border/padding,都会发生重叠.

    里面的三个div都发生了重叠

  2. 下边距只要设置高度,就不会重叠.

    例如第二个div设置了高度50px,它的子元素margin-bottom与它不会发生重叠

 


B
<div style="border:1px solid red; width:100px;">
  <div style="margin:50px 0; background-color:green; height:50px; width:50px;">
    <div style="margin:20px 0;">
      <div style="margin:-60px 0;">B</div>
    </div>
  </div>
</div>

margin值有正有负

  1. 若margin有正有负,则取正最大和负最小相加.

    -60+50=-10,所以上边距为-10px

  2. 子元素的margin-top会影响它跟最近的设置了padding或者border的父节点位置.

    更改B的margin,相对绿色div的位置不变,相对于设置了border的外层div位置会变化


A
B          
<div style="background-color:green;width:50px;margin-top:50px;">
  <div style="margin-top:-30px;margin-bottom:30px;">
    <div style="margin-top:50px;margin-bottom:-30px;">A</div>
  </div>
</div>
<div style="margin:-10px 0; background-color:green; width:50px;">
  <div style="margin:-10px 0;">
    <div style="margin:40px 0;">B</div>
  </div>
</div>

上下两个元素重叠

  1. 两个相邻的元素之间的距离,是由上一个元素的margin-bottom和下一个元素的margin-top的得出的.

    AB两个元素的距离,取位于A元素的有效的margin-bottom(注意height,border对margin-bottom的影响),取B元素的有效的margin-top,在两个元素的数据中取最大正值,和最小负值,两值相加得到就是两个元素的margin距离。

    A的有效margin-bottom为30px、-30px,B有效margin-top为-10px、-10px、40px,AB的距离=-30px+40px=10px;


B
<div style="border:1px solid red; width:100px;">
  <div style="margin:50px 0; background-color:green; height:50px; width:50px;">
    <div style="margin:20px 0;">
      <div style="margin:100px 0;">B</div>
    </div>
  </div>
</div>

创建了BFC元素margin折叠

  1. 创建了block formatting context元素,就像设置了border和padding一样效果.

    什么样的元素会创建bfc,请看http://www.zhoumingzhi.com/2010/06/24/intro-block-formatting-context/


A
B

 

 

<div style="margin:10px 0; background-color:green; width:50px;">A</div>
<div style="margin:10px 0; background-color:green; width:50px;float:left;">B
</div>

设置了某些css值的margin折叠

  1. 元素设置了inline-block、float、position.

    设置了这些属性的元素,margin不与内部元素折叠,也不与相邻元素折叠

 

附件为试验页面,该blog内容为试验页面直接copy,有些东西显示有所差异,请以试验页面为准,大家可以下载之后用浏览器调试,省去敲代码的时间。

若想了解更多请看http://bbs.csdn.net/topics/340188875

分享到:
评论

相关推荐

    margin折叠的问题探讨

    **CSS中的Margin折叠问题详解** 在CSS布局中,"margin折叠"是一个常见的概念,它涉及到元素间margin边距的合并,而不是我们通常认为的错误或bug。这一现象在CSS2.1规范中得到了明确的规定。水平方向上的margin并不...

    Firefox下margin-top会出错

    这种现象被称为“margin折叠”(collapsing margins)。 #### 二、`margin` 折叠的概念 所谓`margin`折叠,指的是两个或多个盒子模型之间的相邻`margin`属性结合为一个单独的`margin`。具体来说,在CSS2.1规范中,...

    2024超全前端面试题

    2. **Margin折叠**:同一BFC内的相邻盒模型之间可能会发生margin折叠现象,即两个相邻盒子的垂直margin会被折叠为一个较大的值。 3. **左边界对齐**:每个元素的左外边距(margin-left)将与包含块的左边界对齐,...

    firefox margin-top失效的原因与解决办法

    清除操作(比如`clear: both`)可以阻止margin折叠,特别是在元素的margin-top与其块级父元素的margin-bottom之间。 如果遇到Firefox中`margin-top`失效的情况,可以尝试以下几种解决方法: - 检查是否有浮动元素...

    11_盒子模型-margin的折叠.html

    11_盒子模型-margin的折叠

    浏览器兼容问题汇总v1.0

    #### 四、margin折叠问题 当相邻元素的`margin`值在垂直方向上发生合并时,就会出现`margin`折叠问题。 **触发条件**: - 元素之间必须是毗邻的,且没有被非空内容、`padding`、`border`或`clear`所分隔。 - 元素...

    前端面试汇总

    - **与margincollapse**: 绝对定位元素不会触发margin折叠。 - **与overflow**: overflow:hidden可以限制绝对定位元素的位置。 - **与float**: 浮动元素不会影响绝对定位元素的位置。 以上涵盖了《前端面试汇总》...

    CSS重要属性之 margin 属性知识大整合(必看篇)

    外边距折叠是CSS布局中的一个现象,指的是垂直方向上相邻的两个元素的margin会折叠成为它们中最大的那一个margin值。这个现象的初衷是为了让垂直布局更加美观。外边距折叠分为三种类型: - 兄弟元素的margin重叠:...

    CSS+JS实现一个DIV层的展开折叠效果

    CSS+JS 实现 DIV 层的展开折叠效果 本文将详细介绍如何使用 CSS 和 JS 实现一个 DIV 层的展开折叠效果。这个效果可以在网页上实现一个折叠的样式,用户可以点击按钮来展开或折叠内容。 HTML 结构 首先,我们需要...

    JS折叠菜单树形菜单

    3. **布局**:CSS的`position`属性和`margin`、`padding`等可以帮助调整菜单的布局,使其看起来整洁有序。 4. **层次感**:通过设置合适的`padding-left`值,可以为不同级别的菜单项创建适当的缩进,体现层次关系。...

    页面文文字过多折叠示例

    margin: 4px 2px; cursor: pointer; } ``` 在这个“文字过多折叠示例”的压缩包中,可能包含了实现上述功能的HTML文件、CSS文件和JavaScript文件。通过查看和学习这些文件,你可以更深入地理解如何在ASP环境中...

    IE7、IE8、ff下的margin-top问题 折叠margin

    “collapsing margins”(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容、padding区域、border边框或使用清除分离方法)结合表示为一个单独的margin。...

    详解css外边距折叠(margin collapsing)

    CSS中的外边距折叠指的是相邻的两个或多个块级元素的外边距(margin)会合并成一个外边距。这种情况在块级元素垂直排列时尤为常见,比如相邻兄弟元素之间、父元素与第一个或最后一个子元素之间以及空的块级元素之间...

    折叠菜单div+CSS

    margin-top: 5px; } ``` 3. **交互逻辑**:为了让菜单折叠和展开,我们需要使用JavaScript或jQuery来处理点击事件。这里,我们可以用简单的条件语句来控制`.menu-content`的`display`属性。 ```javascript $('....

    微信小程序——折叠面板

    margin-bottom: 10px; } .accordion-title { padding: 10px; background-color: #f2f2f2; cursor: pointer; } .accordion-content { padding: 10px; display: none; /* 默认隐藏内容区域 */ transition: ...

    折叠菜单Dome.rar

    &lt;Grid MinHeight="42" x:Name="userinfo" Margin="0 0 0 0" &gt; &lt;StackPanel VerticalAlignment="Center" Margin="40 0 0 0" Orientation="Horizontal"&gt; &lt;TextBlock Margin="14 0 0 0" FontSize="14" Foreground...

    CSS打造的折叠标签页面.rar

    8. **盒模型和边距**:理解CSS的盒模型(content、padding、border、margin)对于精确布局至关重要。正确设置边距和填充可以防止元素重叠,保持界面清晰。 9. **选择器优先级**:了解选择器的优先级规则(ID &gt; 类 &gt;...

Global site tag (gtag.js) - Google Analytics