margin重叠的情况和解决_margin重叠导致出现什么效果

margin重叠的情况和解决_margin重叠导致出现什么效果margin重叠的原因及解决办法

大家好,又见面了,我是你们的朋友全栈君。

我们看MDN上的一句话

块级元素的上外边距和下外边距有时会合并(或折叠)为一个外边距,其大小取其中的最大者,这种行为称为外边距折叠(margin collapsing),有时也翻译为外边距合并。注意浮动元素绝对定位元素的外边距不会折叠。

计算的原则

  • 两个都为正值直接去最大值;
  • 两个一正一副时, 使用正值去减去负值的绝对值;
  • 两个都为负值时, 两个都使用绝对值, 在使用0减去最大值。

解决办法

  • 兄弟间重叠时
    1. 底部元素变为行内盒子(display: inline-block);
    2. 底部元素设置flot
    3. 底部元素的position的值为absolute/fixed
  • 父元素与子元素重叠
    1. 父元素加入(overflow: hidden);
    2. 父元素添加透明边框(border:1px solid transparent);
    3. 子元素变为行内盒子(display: inline-block);
    4. 子元素加入浮动属性或定位

转载于:https://my.oschina.net/u/3105272/blog/3029236

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/106905.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 全网最全Linux 运行jar包的几种方式[通俗易懂]

    全网最全Linux 运行jar包的几种方式[通俗易懂]一、Linux运行jar包的几种方式方式一:java-jarxxx.jar最常用的启动jar包命令,特点:当前ssh窗口被锁定,可按CTRL+C打断程序运行,或直接关闭窗口,程序退出方式二:java-jarxxx.jar&&代表在后台运行,ctrl+c后程序也会继续运行方式三:nohupjava-jarxxx.jar&nohup即nohangup不挂断,关闭SSH客户端连接,程序不会中止运行缺省情况下该作业的所

    2022年10月5日
    3
  • Gson将map转换成JsonObject出现null值

    Gson将map转换成JsonObject出现null值Gson将map转换成JsonObject出现null值异常信息:Exceptioninthread”main”java.lang.IllegalStateException:NotaJSONObject:nullatcom.google.gson.JsonElement.getAsJsonObject(JsonElement…

    2022年9月25日
    4
  • ES6转ES5_es5与es6的区别

    ES6转ES5_es5与es6的区别es6转码es5一.Babel在线转码二.谷歌的Traceur在线转码三.es6console在线转码并运行四.Traceur在页面中引入使用//加载Traceur文件<scriptsrc=”https://google.github.io/traceur-compiler/bin/traceur.js”></script>//这两个是将上…

    2022年9月24日
    2
  • seekBar实现滑动解锁[通俗易懂]

    seekBar实现滑动解锁[通俗易懂]今天android项目里突然要做一个滑动解锁的控件,nm,ui出图就喜欢按照IOS上的控件来,这次也不例外,不过IOS上的滑动解锁效果确实还是不错。好了,废话不多说,上代码。

    2022年6月24日
    20
  • 安全-流量劫持形成的原因

    流量劫持,这种古老的攻击沉寂了一段时间后,最近又开始闹的沸沸扬扬。众多知名品牌的路由器相继爆出存在安全漏洞,引来国内媒体纷纷报道。只要用户没改默认密码,打开一个网页甚至帖子,路由器配置就会被暗中修改。互联网一夜间变得岌岌可危。详解流量劫持的形成原因攻击还是那几种攻击,报道仍是那千篇一律的砖家提醒,以至于大家都麻木了。早已见惯运营商的各种劫持,频繁的广告弹窗,大家也无可奈何。这么多年也没出现…

    2022年4月9日
    42
  • 软件生命周期_常见软件开发模型

    软件生命周期_常见软件开发模型1.软件生命周期软件生命周期是指软件从开始研制到最终被废弃所经历的各个阶段。在不同的阶段里,由不同的组织和人员执行不同的任务,需要消耗不同的资源。生命周期常见的有:瀑布模型、V模型、敏捷开发模型。

    2022年8月3日
    6

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号