1

外边距合并问题主要发生在上外边距问题的展现:

在这里插入图片描述
在这里插入图片描述

当父集和子集同时margin-top的时候一个是50px另外一个是20px,选择最大的那个值
父子级外边距合并,造成子集不能实现margin-top=>什么原因?=>怎么解决? padding解决外边距合并问题=>overflow:hidden;
border怎么去继承, 怎么去继承父级元素

造成的原因

普通文档流的概念:从上到下 加入浮动(float)以后才能从左到右(游览器只会计算上下同时解析,左右是不会去解析的(左右(margin)可以各算各的))
外边距是不脱离普通文档流的,要按照普通文档流的标准解析

为什么发生状况:

(1)上下同时解析(普通文档流)=>参考下面三幅图片
(2)左右(margin)可以各算各地(没有发生普通文档流,阻断了普通文档流)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

解决方式:

1.最简单的方式设置padding 可以解决
2.阻断文档流 (加入border可以有效阻断文档流(通过形成一个相对的“空间”=>这个空间就是形成了“BFC” 块级格式化上下文=>定位通过脱离普通文档流,可以形成密闭的空间?):原因是border需要被程序计算)


顾昀峰
410 声望6 粉丝