外边距合并问题解析

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

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

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

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

造成的原因

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

为什么发生状况:

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

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

解决方式:

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

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看