首页 > 软件开发 > HTML >

margin重叠解决方法

来源:互联网 2023-03-16 19:15:42 430

margin重叠解决方法,margin是CSS里面其中一种样式,作用于HTML框架,但是margin天生就会有重叠的问题,也就是两个margin在一起或者父子级一起会出现这个问题。aFJ办公区 - 实用经验教程分享!

margin重叠解决方法aFJ办公区 - 实用经验教程分享!

工具/原料

  • 网页浏览器,比如IE
  • CSS
  • HTML5

方法/步骤

  • 1

    比如我们有两个方块,我们想让小方块放在大方块的中间部分。aFJ办公区 - 实用经验教程分享!

    margin重叠解决方法aFJ办公区 - 实用经验教程分享!

    margin重叠解决方法aFJ办公区 - 实用经验教程分享!

  • 2

    如果我们定义小模块的margin,会发现大小模块都会共用这个margin。aFJ办公区 - 实用经验教程分享!

    margin重叠解决方法aFJ办公区 - 实用经验教程分享!

    margin重叠解决方法aFJ办公区 - 实用经验教程分享!

  • 2本页面未经授权抓取自百度经验
  • 3

    我们可以在大模块里面加入:aFJ办公区 - 实用经验教程分享!

    overflow: hidden;aFJ办公区 - 实用经验教程分享!

    消除了这个重叠。aFJ办公区 - 实用经验教程分享!

    margin重叠解决方法aFJ办公区 - 实用经验教程分享!

    margin重叠解决方法aFJ办公区 - 实用经验教程分享!

  • 4

    也可以在子模块改为:aFJ办公区 - 实用经验教程分享!

    position: relative;aFJ办公区 - 实用经验教程分享!

    top: 200px;aFJ办公区 - 实用经验教程分享!

    不过相对不方便。aFJ办公区 - 实用经验教程分享!

    margin重叠解决方法aFJ办公区 - 实用经验教程分享!

    margin重叠解决方法aFJ办公区 - 实用经验教程分享!

  • 5

    可以用这个来代替也行:aFJ办公区 - 实用经验教程分享!

    position: absolute;aFJ办公区 - 实用经验教程分享!

    这样会确定位置。aFJ办公区 - 实用经验教程分享!

    margin重叠解决方法aFJ办公区 - 实用经验教程分享!

    margin重叠解决方法aFJ办公区 - 实用经验教程分享!

  • 6

    我们也可以在父模块加入透明边框。aFJ办公区 - 实用经验教程分享!

    border: 1px solid transparent;aFJ办公区 - 实用经验教程分享!

    margin重叠解决方法aFJ办公区 - 实用经验教程分享!

    margin重叠解决方法aFJ办公区 - 实用经验教程分享!

  • 7

    也可以直接加个padding: 1px,就是会把方块变大。aFJ办公区 - 实用经验教程分享!

    margin重叠解决方法aFJ办公区 - 实用经验教程分享!

    margin重叠解决方法aFJ办公区 - 实用经验教程分享!

  • 8

    但是如果用display: inline-block;这样就不会改变大小。aFJ办公区 - 实用经验教程分享!

    margin重叠解决方法aFJ办公区 - 实用经验教程分享!

    margin重叠解决方法aFJ办公区 - 实用经验教程分享!

  • 9

    最后一种方法就是加入float: left;aFJ办公区 - 实用经验教程分享!

    margin重叠解决方法aFJ办公区 - 实用经验教程分享!

    margin重叠解决方法aFJ办公区 - 实用经验教程分享!

  • 注意事项

    • 根据实际情况运用其中的某个方法更合适

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!aFJ办公区 - 实用经验教程分享!


    标签: HTMLCSS

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码