西西软件园多重安全检测下载网站、值得信赖的软件下载站!
软件
软件
文章
搜索

首页编程开发其它知识 → CSS框模型中外边距(margin)折叠图文详解

CSS框模型中外边距(margin)折叠图文详解

相关软件相关文章发表评论 来源:西西整理时间:2012/9/18 16:57:41字体大小:A-A+

作者:佚名点击:369次评论:0次标签: CSS

最近做了个项目,居然在一个小小的css问题上折腾了很久很是纠结——外边距折叠的问题。今天难得清闲,就把这个问题研究了一下,才发现大有学问,所以写篇博文整理一下,以便更加牢记!

  外边距折叠,指的是毗邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距。

  触发条件

 毗邻,没有被非空内容paddingborder 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系

 这些 margin 都处于普通流中,即非浮动元素,非定位元素

  垂直方向外边距合并的计算

  1) 参加折叠的margin都是正值:取其中 margin 较大的值为最终 margin 值。

<div style="height:50px; margin-bottom:50px; width:50px; background-color: red;">A</div>
<div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>

  示意图:
      

   2). 参与折叠的 margin 都是负值:取的是其中绝对值较大的,然后,从 0 位置,负向位移。

<div style="height:100px; margin-bottom:-75px; width:100px; background-color: red;">A</div>
<div style="height:100px; margin-top:-50px; margin-left:50px; width:100px; background-color: green;">B</div>

  示意图:
     

  

  3). 参与折叠的 margin 中有正值,有负值:先取出负 margin 中绝对值中最大的,然后,和正 margin 值中最大的 margin 相加。

<div style="height:50px; margin-bottom:-50px; width:50px; background-color: red;">A</div>
<div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>

   示意图:
      

  4). 相邻的 margin 要一起参与计算,不得分步计算

  要注意,相邻的元素不一定非要是兄弟节点,父子节点也可以,即使不是兄弟父子节点也可以相邻。

  而且,在计算时,相邻的 margin 要一起参与计算,不得分步计算。

<div style="margin:50px 0; background-color:green; width:50px;">
    <div style="margin:-60px 0;">
           <div style="margin:150px 0;">A</div>
    </div>
</div>
<div style="margin:-100px 0; background-color:green; width:50px;">
    <div style="margin:-120px 0;">
           <div style="margin:200px 0;">B</div>
    </div>
</div>

  错误的计算方式:算 A 和 B 之间的 margin,分别算 A 和其父元素的折叠,然后与其父元素的父元素的折叠,这个值算出来之后,应该是 90px。依此法算出 B 的为 80px;然后,A和B折叠,margin 为 90px。

  请注意,多个 margin 相邻折叠成一个 margin,所以计算的时候,应该取所有相关的值一起计算,而不能分开分步来算。

  以上例子中,A 和 B 之间的 margin 折叠产生的 margin,是6个相邻 margin 折叠的结果。将其 margin 值分为两组:

  正值:50px,150px,200px

  负值:-60px,-100px,-120px

  根据有正有负时的计算规则,正值的最大值为 200px,负值中绝对值最大的是 -120px,所以,最终折叠后的 margin 应该是 200 + (-120) = 80px。

  

  5). 浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠

<div style="margin-bottom:50px; width:50px; height:50px; background-color:green;">A</div>
<div style="margin-top:50px; width:100px; height:100px; background-color:green; float:left;">
    <div style="margin-top:50px; background-color:gold;">B</div>
</div>

  示意图:
      

  6). 创建了块级格式化上下文1的元素,不和它的子元素发生 margin 折叠

  以 “overflow : hidden” 的元素为例:

<div style="margin-top:50px; width:100px; height:100px; background-color:green; overflow:hidden;">
    <div style="margin-top:50px; background-color:gold;">B</div>
</div>

  若 B 和它的 "overflow:hidden" 包含块发生 margin 折叠的话,金色的条应该位于绿色块的最上方,否则,没有发生。

  示意图:
    

  7). 元素自身的 margin-bottom 和 margin-top 相邻时也会折叠

  自身 margin-bottom 和 margin-top 相邻,只能是自身内容为空,垂直方向上 border、padding 为 0。

<div style="border:1px solid red; width:100px;">
    <div style="margin-top: 100px;margin-bottom: 50px;"></div>
</div>

  以上代码运行后,我们讲得到的是红色边框的正方形,方框的宽高都应该是 100px,高度不应该是 150px。

  示意图:
    

    相关评论

    阅读本文后您有什么感想? 已有人给出评价!

    • 8 喜欢喜欢
    • 3 顶
    • 1 难过难过
    • 5 囧
    • 3 围观围观
    • 2 无聊无聊

    热门评论

    最新评论

    发表评论 查看所有评论(0)

    昵称:
    表情: 高兴 可 汗 我不要 害羞 好 下下下 送花 屎 亲亲
    字数: 0/500 (您的评论需要经过审核才能显示)