怎样处理外边距margin叠加的难题讨论

2020-11-02 02:06 jianzhan
1、最先你要了解甚么状况下会开启:两个或好几个紧邻的一般流中的块元素竖直方位上的 margin 会折叠

1.两个或好几个
表明其数量务必是超过1个,又表明,折叠是元素与元素间互相的个人行为,不存在 A 和 B 折叠,B 沒有和 A 折叠的状况。

2.紧邻
是指沒有被非空內容、padding、border 或 clear 隔开开,表明其部位关联。
留意1点,在沒有被隔开开的状况下,1个元素的 margin-top 会和它一般流中的第1个子元素(非波动元素等)的 margin-top 邻近; 仅有在1个元素的 height 是 "auto" 的状况下,它的 margin-bottom 才会和它一般流中的最终1个子元素(非波动元素等)的 margin-bottom 邻近。

3.竖直方位
是指实际的方向,仅有竖直方位的 margin 才会折叠,也便是说,水平方位的 margin 不容易产生折叠的状况。

2、那末怎样使元素左右margin不折叠呢?

1.波动元素、inline-block 元素、肯定精准定位元素的 margin 不容易和竖直方位上别的元素的 margin 折叠(留意这里指的是左右邻近的元素)

2.建立了块级文件格式化左右文的元素,不和它的子元素产生 margin 折叠(留意这里指的是建立了BFC的元素和它的子元素不容易产生折叠)

大家都了解开启BFC的要素是float(除none)、overflow(除visible)、display(table-cell/table-caption/inline-block)、position(除static/relative)

很显著大伙儿能够看出来邻近元素不产生折叠的要素是开启BFC要素的非空子集,也便是说假如我为左右邻近的元素设定了overflow:hidden,尽管开启了BFC,可是左右元素的左右margin還是会产生折叠

这个难题实际上和BFC并沒有太大的关联,期待大伙儿不必乱用BFC,要了解BFC并不是全能型,建立BFC的初衷只是以便让元素自身(包含它的子元素)可以正确的测算自身的宽高。http://www.yuiblog.com/blog/2010/05/19/css⑴01-block-formatting-contexts

不产生折叠的开启要素是波动元素、inline-block 元素、肯定精准定位元素,这个只是建立BFC要素的非空子集,但其实不能表明建立了BFC的元素就不容易产生折叠,由于BFC还能够用overflow:hidden来建立。相反假如父元素开启了BFC,那末他的块级子元素反而会产生折叠。

这里我写了1个DEMO来讲明这个难题:http://whycss.com/demo/collspan_demo.html 建立BFC的3种状况都提到了,結果是子元素的左右margin都会产生折叠 。

克军提到的最终1个zoom,这是IE访问器最开始适用的放缩特性,到如今仅有全新的webkit关键的访问器也适用。但只是在IE8下列的访问器下才可取得成功开启hasLayout,针对非IE访问器也是沒有实际效果的,因此還是必须一样的去建立BFC。有关hasLayout与BFC的详细介绍可参照自己blog的文章内容http://www.smallni.com/?p=174

有关最后怎样处理这样的难题,我的提议是在写的情况下尽可能用同1方位的margin,例如都设定为top或bottom,由于你在实践活动的情况下有时不必须为每一个元素设定波动、inline-block或absolute 。