--用clear 清除浮动,写在浮动元素之后--> 2、外边距塌陷 (父子塌陷和兄弟塌陷) 只在垂直方向上,水平方向不会塌陷 父子塌陷原因: 根据规范,父级盒子没有上边框(border),上边内边距,它的上边距就会和第一个子级元素的上边距重叠(两者取大值) <!DOCTYPE html>Document*{margin:0;padding:0;}.father{width:40...
并列关系的外边距塌陷 👥 当两个并列的元素(兄弟元素)分别设置上下外边距时,最终会显示其中最大的外边距值。出现条件: 两个元素是兄弟关系。 相遇的margin值会产生塌陷/折叠。 结果:正值取较大值,负值取绝对值较大的值。 解决方法: 利用BFC规则:给其中一个元素套一个父盒子,并为父元素添加overflow:hidden属性。
处理外边距塌陷的方法如下: 1.使用边框或内边距:给父元素添加边框或内边距可以阻止外边距的合并。 2.使用浮动或定位:将父元素设置为浮动或定位,可以防止外边距合并。 3.使用伪元素:在父元素内部添加一个空的伪元素,并设置其样式为clear:both,可以阻止外边距合并。 4.使用overflow属性:将父元素的overflow属性设置为...
外边距塌陷： 问题描述：在父子块元素间，当父元素具有上外边距或无上外边距，同时子元素也具有上外边距时，两个外边距会合成一个外边距，以较大的值为准，导致原本设置的上外边距失效。 解决方案： 不推荐方法：给父元素添加边框或内边距。 推荐方法：触发BFC，可以创建一个独立空间，避免外边距...
下面介绍几种解决外边距塌陷的方法。 1.使用padding替代margin:将外边距应用于元素的父级元素的内边距而不是元素本身,可以有效地避免外边距的塌陷。这样做的好处是在不影响元素的布局的同时,解决了外边距塌陷的问题。 2.使用边框:给元素添加一个边框,可以有效地阻止外边距的合并。边框会在外边距合并之前形成一个...
外边距塌陷原因和解决方式 概念 外边距塌陷也称外边距合并,在文档流中相邻(兄弟或父子关系)的块级元素的外边距组合在一起变成单个外边距,只有在上下外边距才会出现塌陷,左右不会出现。 解析:1.两个嵌套块级元素,父元素如果没有上补白和上边框,那么它的上边距会和它的文档流中的的第一个子元素的上边距重叠,取...
下面主要讲margin外边距塌陷和margin外边距合并的问题。继续往下看,告诉你怎么解决这些问题。 一、什么是外边距塌陷 两个嵌套关系的(父子关系)块元素,当父元素有上外边距或者没有上外边距(margin-top),子元素也有上外边距的时候。两个上外边距会合成一个上外边距,以值相对较大的上外边距值为准。如下图: 这种现象就...
首先，外边距塌陷问题仅在垂直方向上出现，涉及 margin-top 和 margin-bottom 属性。而块级元素才会遇到此类问题，行内元素或行内块级元素则不会。以栗子一为例，假设我们有相邻的两个块级元素 bro1 和 bro2，分别给 bro1 添加底部外边距，给 bro2 添加顶部外边距。按照逻辑，两个元素之间应保持 ...
外边距塌陷原理 都知道解决外边距塌陷有多种⽅法其中⼀种是给⽗盒⼦加个overflow:hiden;例如 p { color: #f55;background: #fcc;width: 200px;line-height: 100px;text-align:center;margin: 100px;} .a { /* overflow: hidden; */ width: 300px;height: 300px;background-color: skyblue;...
外边距塌陷原因和解决⽅式 概念 外边距塌陷也称外边距合并，在⽂档流中相邻（兄弟或⽗⼦关系）的块级元素的外边距组合在⼀起变成单个外边距，只有在上下外边距才会出现塌陷，左右不会出现。 解析：1.两个嵌套块级元素，⽗元素如果没有上补⽩和上边框，那么它的上边距会和它的⽂档流中的的...