css盒模型margin的折叠

一,折叠效应

1.在CSS中,两个或多个毗邻普通流中的块级盒子(可能是父子元素,也可能是兄弟元素)在垂直方向上的外边距会发生叠加,这种形成的外边距称之为外边距叠加

二,折叠条件

1.大于等于2个元素,且相邻的两个或多个元素都需符合下面所需的折叠条件

2.垂直方向

3.元素处于普通流
(浮动元素,绝对定位,固定定位不会和任何元素发生折叠,包括其相邻子元素)

4.块级元素
(行内块级元素不会和任何元素发生折叠,包括和其相邻子元素)

5.毗邻:
(两元素之间没有padding,没有border,没有其他元素)
盒子的top margin和它第一个普通流子元素top margin
盒子的bottom margin和它下一个普通流兄弟的top margin
盒子的bottom margin和它父元素的bottom margin(当父元素的heightauto时)
盒子的top marginbottom margin,且没有创建一个新的块级格式上下文,且有被计算为0min-height,被计算为0或auto的height,且没有普通流子元素

5.注意,除以上排除的情况外,创建了BFC的元素不会和它的第一个相邻的子元素发生外边距叠加

三,折叠的计算方式

1.取当中最大的值作为公共的margin

四,个人感受

1.目前并没有特别的地方会直接应用margin的折叠效应,但是要知道原理,否则在碰到时不能够理解。

猜你喜欢

转载自blog.csdn.net/qq_40340943/article/details/109632733
今日推荐