视频最后说的,有利于让布局更稳定,不会因为一个元素的改变影响布局
asdfasdasd
老师视频中讲了:父元素为非块状格式化上下文元素会产生margin-top/margin-bottom重叠,而设置了
overflow值除visible外,即hidden/scroll/auto都会触发BFC,使父元素成为块级格式上下文,就不会产生父子margin重叠的问题
没有。。
font-size:0px;
magin重叠
蓝色背景是子元素的位置啊 父元素是灰色的 得仔细看
margin重叠是正常现象,主要是要你知道margin重叠效果,善用margin重叠
事实上,你这里的三个元素都没有发生margin重叠,你把father1和son2加上margin-top,会发现,他们都没有重叠了。margin重叠只发生在普通的block元素上,加上float虽然也会使元素block,但却不是普通的block元素,应该是脱离文档流的block元素,视频前面也说了,float和absolute元素除外。把father1,2,3的float去掉。在每个盒子外面加一个盒子再加上float:left看看吧
不是太理解你的问题,之所以发生margin重叠是因为网页考虑到内容的排版问题,默认重叠可以使排版更好看,就比如老师说的多个空格的合并为一个空格。就是说设置margin的两个盒子分别也都有自己的margin值,只是在表现上有差别。
图片层CSS
img{
width:100%或者height:100%;
}
是这种效果吗?
不知道你现在理解了没,我的理解是,比如一组元素,两两之间都需要间隔时,我们一般都会统一为每个元素设置margin-bottom或者margin-top,以设置margin-top为例,那么到最后(最下面)一个元素的时候,一般需要单独为其设置margin-bottom保持布局的完整合理,但是之后项目需求若是删除了最后一个元素,那么又没有给倒数第二个元素设置margin-bottom,就会出现当前的最后一个元素紧贴底部的情况,需要重新为其设置margin-bottom来解决,但是若采用老师所说的方式,相邻兄弟元素之间会发生重叠不影响间距,最后和第一个元素又都有各自的margin-bottom和margin-top,删除任意一个元素都不会影响这种稳定的状态,这就是所谓增加了健壮性。
嗯,希望讲清楚啦。