博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
深究盒模型的margin合并问题
阅读量:5865 次
发布时间:2019-06-19

本文共 2880 字,大约阅读时间需要 9 分钟。

1.首先,了解一些词汇

- 流内元素?

如果一个元素是浮动的,绝对定位的或者是根元素,那么它就是流外元素。即我们常说的脱离文档流的元素。如果一个元素不是流外的,即仍在文档流中的元素,就叫流内元素。
- 流内块级盒?
流内块级盒,就是流内块级元素生成的一个盒。
- 什么是格式化上下文?
常规流中的盒属于一个格式化上下文,可能是块或是内联,但不能都是(既是块又是内联)。块级盒参与块格式化上下文。内联级盒参与内联格式化上下文 。在一个块格式化上下文中,盒在竖直方向一个接一个地放置,从包含块的顶部开始。两个兄弟盒之间的竖直距离由margin属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并。
新建块级格式化上下文(BFC)的条件:

  • 浮动元素,float除了none以外的值。
  • 绝对定位元素,position(absolute,fixed)
  • display 为以下其中之一的值 inline-blocks,table-cells,table-captions
  • overflow 除了 visible 以外的值(hidden,auto,scroll)
  • 注意:"display:table" 本身并不产生 BFC,而是由它产生匿名框,匿名框中包含 "display:table-cell" 的框会产 BFC。

- 行盒(line box)

在一个行内格式化上下文中,盒是一个接一个水平放置的,从包含块的顶部开始。这些盒之间的水平margin,border和padding都有效。盒可能以不同的方式竖直对齐:以它们的底部或者顶部对齐,或者以它们里面的文本的基线对齐。包含来自同一行的盒的矩形区域叫做行盒
- 相邻的margin?
两个margin是相邻的,当且仅当:

  • 都属于流内块级盒,处于同一个块格式化上下文。
  • 没有行盒(line box),没有空隙,没有padding并且没有border把它们隔开(注意,因此某些0高度行盒)
  • 都属于竖直相邻盒边(vertically-adjacent box edges),即来自下列某一对:

    * 一个盒的top margin和它的第一个流内子级的top margin* 一个盒的bottom margin和它的下一个流内后面的兄弟(its next in-flow following sibling)的top margin* 最后一个流内子级的bottom margin和它的父级的bottom margin,如果父级的高度的计算值为'auto'* 一个盒的top和bottom margin,该盒没有建立一个新的块格式化上下文并且min-height的计算值为0,height的计算值为0或者'auto',并且没有流内子级
  • 如果一个margin的任何部分margin与另一个margin相邻的话,就认为它与那个margin相邻,是合并(collapsed)margin。

2.什么是margin合并(重叠)

       在CSS中,两个或者多个盒(可能但不一定是兄弟)的相邻的margin会被结合成一个margin。Margin按这种方式结合叫合并(collapse),产生的结合的margin叫做合并margin。

3.合并的规则

  1. 相邻的竖直margin会合并,除了:

    • 根元素的盒的margin不合并
    • 如果一个有空隙(clearance)的元素的top和bottom margin是相邻的,它的margin会与紧跟着的兄弟的相邻margin合并,但产生的margin不会与父级块的bottom margin合并
  2. 水平margin不会合并
合并的计算规则
  • 当两个或者更多的margin合并时,产生的margin宽度为合并margin宽度中的最大值。
  • 至于负margin,就从正相邻margin的最大值中减去负相邻margin的绝对值的最大值。
  • 如果没有正margin,就用0减去相邻margin的绝对值的最大值

4.总结

所以综上所述,只要两个margin被隔开了,就一定不会发生margin重叠。可以是上下border隔开,可以是被上下padding隔开,也可以是被高度隔开,可以是被流内子级隔开,可以被空隙(空隙的产生与clear有关)隔开,可以被新建立的格式化上下文隔开。

以下是

  • 一个浮动的盒与任何其它盒之间的margin不会合并(甚至一个浮动盒与它的流内子级之间也不会)任何浮动的、绝对定位的盒子不会与任何其他盒子的margin合并(原因:它们是流外块级盒)。
  • 建立了新的块格式化上下文的元素(例如,浮动盒与overflow不为'visible'的元素)的margin不会与它们的流内子级合并。(原因:不在同一个块级格式化上下文)
  • 绝对定位的盒的margin不会合并(甚至与它们的流内子级也不会)把绝对定位的盒子比作飞起来的盒子,那么这两个飞起来的盒子,一定处于不同高度,因此,不管这个盒子如何移动,都不会影响任何一个飞起来的盒子。
  • 内联盒的margin不会合并(甚至与它们的流内子级也不会)
  • 一个流内块级元素的bottom margin总会与它的下一个流内块级兄弟的top margin合并,除非兄弟有空隙
  • 一个流内块级元素的top margin会与它的第一个流内块级子级的top margin合并,如果该元素没有top border,没有top padding并且该子级没有空隙
  • 一个'height'为'auto'并且'min-height'为0的流内块级盒的bottom margin会与它的最后一个流内块级子级的bottom margin合并,如果该盒没有bottom padding并且没有bottom border并且子级的bottom margin不与有空隙的top margin合并
  • 盒自身的margin也会合并,如果'min-height'属性为0,并且既没有top或者bottom border也没有top或者bottom padding,并且其'height'为0或者'auto',并且不含行盒,并且其所有流内子级的margin(如果有的话)都合并了。
  • 如果盒的top和bottom margin相邻,那么可能会被彻底合并(collapse through)

margin。此时,元素的位置取决于与其它margin被合并了的元素的关系

  • 如果该元素的margin与其父级的top margin合并了,盒的top border边被定义为与其父级的相同

否则,要么该元素的父级没有参与margin合并,要么只涉及其父级的bottom margin。如果该元素的bottom border不为0的话,其top border边的位置将正常显示(the same as it would have been)。

注意,已被彻底合并了的元素的位置不影响其它margin被合并的元素的位置,只有在布局这些元素的后代时,才需要top border边的位置。

整理自css2.1规范:[]

以及:[]

转载地址:http://chynx.baihongyu.com/

你可能感兴趣的文章
Android 编译出错解决
查看>>
iOS--The request was denied by service delegate (SBMainWorkspace) for reason:
查看>>
Android 打开WIFI并快速获取WIFI的信息
查看>>
【IOS开发】GDataXML解析XML
查看>>
Iptables
查看>>
GridView多行多列合并单元格(指定列合并)
查看>>
什么是DDOS攻击?怎么防御?
查看>>
状态模式(State Pattern)
查看>>
log4j日志框架学习
查看>>
function 与 => 的区别
查看>>
TYVJ P1077 有理逼近 Label:坑,tle的好帮手 不懂
查看>>
面试题:缓存Redis与Memcached的比较 有用
查看>>
EXCEL自动撤销合并单元格并填充相应内容(转帖)
查看>>
Python3学习笔记10-条件控制
查看>>
Nginx 1.2.6 稳定版发布
查看>>
黄聪:如何使用CodeSmith批量生成代码(原创系列教程)
查看>>
HDOJ---1421 搬寝室[DP]
查看>>
JS 中的== 与 ===
查看>>
ES6 - 收藏集 - 掘金
查看>>
13.11. this is incompatible with sql_mode=only_full_group_by
查看>>