margin重叠 - 详细讲解重叠使用情境、方法、重叠条件、规则、案例!

老白 3年前 1182浏览 0评论

 margin重叠通常特性:

1、black水平元素(不包括float和absolute元素)

2、不考虑writing-mode,只发生在垂直方向(margin-top/margin-bottom)

margin重叠三种情境:

1、相邻的兄弟元素

2、父级和第一个/最后一个子元素

3、空的black元素

具体:

1、相邻兄弟元素margin重叠

margin重叠 - 详细讲解重叠使用情境、方法、重叠条件、规则、案例! CSS学习 第1张

2、父级和第一个/最后一个子元素重叠(父子共用,父子重叠)

margin重叠 - 详细讲解重叠使用情境、方法、重叠条件、规则、案例! CSS学习 第2张

margin重叠 - 详细讲解重叠使用情境、方法、重叠条件、规则、案例! CSS学习 第3张

父子margin重叠其它必备条件:

margin-top重叠:

1、父元素飞块状格式化上下文元素(没有overflow: hidden;)

2、父元素没有border-top设置

3、父元素没有padding-top设置

4、父元素和第一个子元素之间没有inline元素分割(没有空格、文字、行内元素等)

margin-bottom重叠:

1、父元素非块状格式化上下文元素

2、父元素没有border-top设置

3、父元素没有padding-top设置

4、父元素和第一个子元素之间没有inline元素分割(没有空格、文字、行内元素等)

5、父元素没有height,min-height、max-height限制

margin重叠 - 详细讲解重叠使用情境、方法、重叠条件、规则、案例! CSS学习 第4张

margin重叠 - 详细讲解重叠使用情境、方法、重叠条件、规则、案例! CSS学习 第5张

margin重叠 - 详细讲解重叠使用情境、方法、重叠条件、规则、案例! CSS学习 第6张

3、空black元素margin重叠

margin重叠 - 详细讲解重叠使用情境、方法、重叠条件、规则、案例! CSS学习 第7张

空black元素重叠的其它条件:

1、元素没有border设置

2、元素没有padding设置

3、里面没有inline元素

4、没有height、min-height

margin重叠 - 详细讲解重叠使用情境、方法、重叠条件、规则、案例! CSS学习 第8张

margin重叠 - 详细讲解重叠使用情境、方法、重叠条件、规则、案例! CSS学习 第9张

margin重叠的计算规则:

1、正正取大值

2、正负值相加

3、负负最负值

margin重叠 - 详细讲解重叠使用情境、方法、重叠条件、规则、案例! CSS学习 第10张

margin重叠 - 详细讲解重叠使用情境、方法、重叠条件、规则、案例! CSS学习 第11张

margin重叠 - 详细讲解重叠使用情境、方法、重叠条件、规则、案例! CSS学习 第12张

margin重叠 - 详细讲解重叠使用情境、方法、重叠条件、规则、案例! CSS学习 第13张


margin重叠历史由来:

1、连续段落或者列表之类,如果没有margin重叠,首尾相间距会和其它兄弟标签1:2关系,排版不自然

2、web中任何地方嵌套或者直接放入任何裸div,都不会影响原来的布局。

3、遗落的空标签多个<p>元素,都不会影响原来的阅读排版。

最终,最重要的就是要善用margin重叠!

margin重叠 - 详细讲解重叠使用情境、方法、重叠条件、规则、案例! CSS学习 第14张

老白在写zblog模板的时候,常用的还是使用margin-bottom,也遇到过第一个子元素间距问题,以及取消幻灯片,取消某个模块后导致的不对齐问题。

善用margin的话,就可以如上图所示,排版父元素与第一个和最后一个子元素之间都存在固定的间距,而不是因为移除某个模块和子元素导致父子 兄弟标签出现不对齐! 但是,必须注意不能格式化,overflow,不然重叠就会失效!

PS:如果用了overflow,也就没必要重叠了!

发表评论