overflow不为‘visible’的元素,不会与它的流内子级合并
如果把father的overflow的值改为不是‘visible’的值,那么就不会发生margin重叠,如下图所示。
overflow不为‘visible’的元素,不会与它的流内子级合并
2.没有行盒(line box),没有空隙,没有padding并且没有border把它们隔开。
意思就是说,如果两个margin之间有东西隔着,它们并不是紧挨着一起,那么就不会发生margin重叠。
举个��:父元素有border,父子元素不会发生margin重叠。
这种情况是,父子元素margin没有被隔开的。因此,margin重叠了。如图所示:
父元素有border,父子元素不会发生margin重叠
如果给父元素顶部添加1像素的border,那么父子元素margin被边框隔离,此时不会发生margin重叠。如图所示:
父元素有border,父子元素不会发生margin重叠
此时child距离father顶部20px;
在举个例子:空div的margin自身重叠
如果空div的上下margin没有隔开,就会发生重叠,如图所示:
空div的margin自身重叠
红色div向下偏离了100px,而不是200px,因为空div发生了margin重叠。如果给空div加上padding-top=10px,就不会发生margin重叠,如图所示:
空div的margin自身重叠
此时红色div向下偏移了210px(100+100+10)。
3.最后一个流内子级的bottom margin和它的父级的bottom margin,如果父级的高度的计算值为’auto’。
此时father元素高度是auto,father的margin-bottom与child的margin-bottom,发生了重叠,因此,sibling距离father150px;
如图所示:
最后一个流内子级的bottom margin和它的父级的bottom margin,如果父级的高度的计算值为’auto’。
如果此时给father设置height:100px;那么father的margin-bottom就不会和child的margin-bottom发生重叠。此时sibling与father的垂直距离,只跟它们的margin值有关,与child的margin值无关。如图所示:
最后一个流内子级的bottom margin和它的父级的bottom margin,如果父级的高度的计算值为’auto’。
4.一个盒的top和bottom margin,该盒没有建立一个新的块格式化上下文并且min-height的计算值为0,height的计算值为0或者’auto’,并且没有流内子级。
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
最后
❤️ 谢谢支持,喜欢的话别忘了 关注、点赞哦。
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)**
[外链图片转存中…(img-ALMMHKoj-1712804844137)]
最后
❤️ 谢谢支持,喜欢的话别忘了 关注、点赞哦。
[外链图片转存中…(img-0ncb63P2-1712804844137)]
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
[外链图片转存中…(img-Qn15Ljv0-1712804844137)]