边界重叠间距的重叠问题（最详细）

<阿睿>

已于 2022-06-21 09:28:20 修改

阅读量1.2k

点赞数 2

分类专栏：前端文章标签： css html 前端

于 2022-06-16 22:50:20 首次发布

本文链接：https://blog.csdn.net/qq_45288176/article/details/125297600

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文探讨了CSS中出现的两种边界重叠问题，包括父子元素和上下相邻兄弟元素的边界重叠。分析了为何会出现这种现象，并详细列举了多种解决方案，如添加内容、触发BFC、使用伪类、浮动、定位、添加padding和border等。同时，提到了特殊情况下的边界重叠例外，如浮动元素、绝对定位和特定CSS属性的使用。

摘要由CSDN通过智能技术生成

一：引：两种间距的重叠问题

二：分析第一种 Css解决父子边界重合

2.1 why?什么情况会出现父子边界重叠问题？

补充：重叠的三种情况

2.2解决办法总览

2.2.1 父元素加内容使父元素和子类间隔开来

2.2.2 在父标签中加一个空的table，触发BFC（空的table会触发BFC：块级格式化上下文）

2.2.7 为父元素或者子元素声明绝对定位

2.2.8 为父元素添加border属性

2.2.9 对父级元素添加 display:inline-block;

解决办法总览

三：第二种 Css解决上下兄弟相邻发生重叠

四边界重叠例外实例

一：引：两种间距的重叠问题

1: 父元素后一个子元素

2: 上下兄弟的相邻就发生重叠取最大值显示

二：分析第一种 Css解决父子边界重合

2.1 why?什么情况会出现父子边界重叠问题？

子元素设置了margin-top属性传递给了父元素，导致子元素和父元素相邻的垂直外边距发生重叠。

补充：重叠的三种情况

1：div上下垂直

外边距重叠是指两个垂直相邻的块级元素，当上下两个边距相遇时，起外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。

2：父子元素

另一个重叠现象是当一个元素包含在另一个元素之中时，子元素与父元素之间也会产生重叠现象，重叠后的外边距，等于其中最大者

3：自身内容为空

同理，如果一个无内容的空元素，其自身上下边距也会产生重叠。

示例：父子边界重叠 margin-top 无效

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
                   #div_01{
                        height: 300px;
                        width: 300px;
                        background-color: antiquewhite;
                    }
                    #div_02{;
                        margin-top: 50px;
                        height: 100px;
                        width: 100px;
                        background-color: red;
                    }
       </style>
   </head>
   <body>
   <div id="div_01">
           <div id="div_02">我是子元素的内容</div>
           </div>
   </body>
</html>

2.2解决办法总览

2.2.1 父元素加内容使父元素和子类间隔开来

<div id="div_01">
           我的内容
           <div id="div_02">我是子元素的内容</div>
       </div>

2.2.2 在父标签中加一个空的table，触发BFC（空的table会触发BFC：块级格式化上下文）

<div id="div_01">
           <table></table>
           <div id="div_02">我是子元素的内容</div>
       </div>

2.2.3 最好的解决办法伪类

            #div_01{
               height: 300px;
               width: 300px;
               background-color: antiquewhite;
           }
           #div_02{
               margin-top: 50px;
               height: 100px;
               width: 100px;
               background-color: red;
           }
           .clearfix::before{
               display: table;
               content: "";
           }

<div id="div_01" class="clearfix">
<div id="div_02">我是子元素的内容</div>
</div>

2.2.4 使父元素浮动或者子元素浮动

            #div_01{
               height: 300px;
               width: 300px;
               background-color: antiquewhite;
           }
           #div_02{
               float: left;
               margin-top: 50px;
               height: 100px;
               width: 100px;
               background-color: red;
           }

<div id="div_01">
<div id="div_02">我是子元素的内容</div>
</div>

2.2.5 为父元素添加padding

#div_01{
               padding: 10px;
               height: 300px;
               width: 300px;
               background-color: antiquewhite;
           }
           #div_02{
               margin-top: 50px;
               height: 100px;
               width: 100px;
               background-color: red;
           }

<div id="div_01"> <div id="div_02">我是子元素的内容</div> </div>

padding 撑开了父子元素

2.2.6 为父元素添加overflow

overflow: auto;

2.2.7 为父元素或者子元素声明绝对定位

position: absolute;

2.2.8 为父元素添加border属性

border: 1px solid aqua;

2.2.9 对父级元素添加 display:inline-block;

解决办法总览

外就是父

外层元素padding代替
外层元素透明边框 border:1px solid transparent;
内（外）层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;
内层元素加float:left;或display:inline-block;
内(外)层元素padding:1px;2.
外层 display:inline-block

三：第二种 Css解决上下兄弟相邻发生重叠

同上：

四边界重叠例外实例

水平边距永远不会重合。
在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下：
a- 全部都为正值，取最大者；
b- 不全是正值，则都取绝对值，然后用正值减去最大值；
c- 没有正值，则都取绝对值，然后用0减去最大值。
注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。
相邻的盒模型中，如果其中的一个是浮动的（float），垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也是这样。
设置了overflow属性的元素和它的子元素之间的margin不被重叠（overflow取值为visible除外）。
设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，并且和他们的子元素之间也是一样。
设置了display:inline-block的元素，垂直margin不会重叠，甚至和他们的子元素之间也是一样。
如果一个盒模型的上下margin相邻，这时它的margin可能重叠覆盖（collapse through）它。在这种情况下，元素的位置（position）取决于它的相邻元素的margin是否重叠。
a-如果元素的margin和它的父元素的margin-top重叠在一起，盒模型border-top的边界定义和它的父元素相同。
b-另外，任意元素的父元素不参与margin的重叠，或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零，那么元素的border-top边界位置和原来一样。
一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom重叠。
注意，那些已经被重叠覆盖的元素的位置对其他已经重叠的元素的位置没有任何影响；只有在对这些元素的子元素定位时，border-top边界位置才是必需的。
根元素的垂直margin不会被重叠。