一,折叠的效应
1.在CSS中,两个或多个毗邻的普通流中的块级盒子(可能是父子元素,也可能是兄弟元素)在垂直方向上的外边距会发生叠加,这种形成的外边距我们称他为外边距叠加。
二,折叠所需的条件
1.大于等于2个元素,且相邻的两个或多个元素都需符合下面所需的折叠条件。
2.垂直的方向。
3.元素处于普通流:
(浮动元素,绝对定位,固定定位不会和任何元素发生折叠,包括其相邻子元素)
4.块级元素:
(行内块级元素不会和任何元素发生折叠,包括和其相邻子元素)
5.毗邻:
(两元素之间没有padding,没有border,没有其他元素)
盒子的top margin和它第一个普通流子元素的top margin
盒子的bottom margin和它下一个普通流兄弟的top margin
盒子的bottom margin和它父元素的bottom margin(当父元素的height为auto时)
盒子的top margin和bottom margin,且没有创建一个新的块级格式上下文,且有被计算为0的min-height,被计算为0或auto的height,且没有普通流子元素
5.需要注意的是,除以上排除的情况外,创建了BFC的元素不会和它的第一个相邻的子元素发生外边距叠加
三,折叠的计算方式
1.取其中最大的值作为公共的margin
四,个人感觉
1.目前并没有特别的地方会直接用到margin的折叠效应,但是要知道原理,否则在碰到时不能够理解。