css-margin折叠塌陷、传递、一正一负时的表现

最新推荐文章于 2024-11-15 16:31:12 发布

原创最新推荐文章于 2024-11-15 16:31:12 发布 · 287 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

本文详细探讨了CSS中margin折叠、塌陷及传递的现象，涉及块级元素的宽度计算、margin在垂直方向上的行为，以及解决margin折叠问题的方法，包括使用padding和BFC技巧。还举例分析了面试中常见的margin一正一负情况的应用。

`margin`折叠塌陷、传递、一正一负时的表现

块级元素宽高的组成

注意：块级元素默认的宽度是width: auto而不是100%

默认情况下，块元素实际占用的父元素的内容区域，由外边距margin + 边框线border + 内边距padding加上内容组成

故上文提及的width: auto应理解为100% - ( padding + border )后剩余的宽度，也可以说为容器的100%

简单的来说——块级元素默认情况下是占据父元素的内容中的一行，而行内元素因为没有上下内外边距所以，只计算左右内外边距，见“day6-内联元素、块、行内块、选择器权重”一文

`margin`向上级元素传递的问题

`margin-top/bottom`的传递

margin-top传递：如果 块级子元素的顶部线 与 父元素的顶部线——重叠，那么这 子元素 的margin-top的值将会传递给父元素，我们理想的情况是，box元素距离container的顶部20px，并且container是紧挨着top的

而实际的效果是下方

<div class="top">top</div>
<div class="container">
    <p>container</p>
    <div class="box">
        box
    </div>
</div>

@mixin flex{
    display: flex;
    align-item: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
}
.top{
  height: 100px;
  background-color: orange;
  @include flex;
}
.container{
  background-color: #cccccc;
  position: relative;
  &>p{
    position: absolute;
    left: 10%;
    top: 40%;
  }
  .box{
    margin: 20px auto 0 auto;
    width: 600px;
    height: 100px;
    background-color: #1F5378;
    @include flex;
  }
}

`margin-bottom`传递

如果 块级子元素 的 底部线 和 父元素 的 底部线 重叠，并且父元素高度为auto，那么这个margin-bottom会发生传递。这个和上一个问题一样，我们想要的效果是子元素距离父元素的底部20px，而实际效果如下

<div class="container">
    <p>container</p>
    <div class="box">
        box
    </div>
</div>
<div class="bottom">bottom</div>

@mixin flex{
    display: flex;
    align-item: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
}
.top{
  height: 100px;
  background-color: orange;
  @include flex
}
.container{
  background-color: #cccccc;
  position: relative;
  &>p{
    position: absolute;
    left: 10%;
    top: 40%;
  }
  .box{
    margin: 0px auto 20px auto;
    width: 600px;
    height: 100px;
    background-color: #1F5378;
    @include flex;
  }
}
.bottom{
  height: 100px;
  @include flex;
  background-color: #20c997;
}

解决方案

给父元素设置padding-top/bottom，值必须要大于0才能生效
给父元素设置border
触发BFC块级上下文，比如给父元素设置overflow: auto

同级元素间`margin`折叠/塌陷

margin-top/bottom的折叠collapse，俗称margin塌陷，它通常指：

垂直方向上相邻两个块元素之间都设置margin时，只有最大的margin生效（两个元素直接的距离只有100px而非预想的200px）

注意：外边距折叠不止发生在兄弟元素上，嵌套的父子元素同样存在，例如内层元素的下边距发生了传递的同时父元素设置下边距，也会取较大的边距生效

水平方向上的边距不会折叠

发生折叠后取值计算规则：取较大值作为视觉边距

解决方案

只写一个元素的边距
利用BFC机制

`margin`折叠时一正一负的情况

某公司面试题，首先我们分为以下的情况

上负下正
	|--负值大于正值
	|--负值小于正值
下负上正
	|--负值大于正值
	|--负值小于正值

先说结论，只要是负值大，都是元素都会被向上吸收，结果为"负值+正值=向上偏移的距离"；正直大，“正值+负值=向下偏移的距离”

上负下正

  <div class="top">top</div>
  <div class="middle">middle</div>
  <div class="bottom">bottom</div>
  <div class="foot">foot</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #fff;
}

.top {
  background-color: #3498db;
}

.middle {
  background-color: #1abc9c;
  margin-bottom: -10px;
}

.bottom {
  background-color: #e67e22;
  margin-top: 20px;
}

.foot {
  background-color: #95a5a6;
}

负值小于正值：上负值-10px下正值20px，表现为上方元素距离下方元素10px