CSS学习笔记（一）

发表于 更新于 分类于 阅读次数： 本文字数： 3.9k 阅读时长 ≈ 4 分钟
margin的传递,margin的折叠

margin的传递

margin一般用来设置设置盒子的外边距，padding一般用来设置设置盒子的内边距，但是不是绝对的。

margin的传递的复现场景：我们希望盒子内部的某个子盒子距离父盒子有一定的上边距或者下边距。

margin-top传递

复现：如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
    div {
      width: 100px;
      height: 100px;
    }
    .container {
      background-color: blue;
    }
    .box {
      background-color: red;
      margin-top: 20px;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

此时，子盒子的margin-top会传递给父盒子，即父盒子距离其上方有20px。

解决方案

给父盒子设置padding-top

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
    div {
      width: 100px;
      height: 100px;
    }
    .container {
      width: 300px;
      height: 300px;
      /* 添加padding */
      padding-top:20px;
      background-color: blue;
    }
    .box {
      background-color: red;
      margin-top: 20px;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

给父盒子设置border/border-top

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    div {
      width: 100px;
      height: 100px;
    }
    .container {
      /* 添加border,缺点：border增加了额外的像素 */
      border-top: 1px solid transparent; 
      /* 或者 */
      /* border: 1px solid transparent; */  
      width: 300px;
      height: 300px;
      background-color: blue;
    }
    .box {
      background-color: red;
      margin-top: 20px;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

触发BFC

BFC：block formating context（块级格式化上下文）

触发BFC：设置overflow的值为auto

给父盒子设置一个独立的空间，盒子内部子盒子得布局不受外界影响。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
    div {
      width: 100px;
      height: 100px;
    }
    .container {
      /* 触发BFC */
      overflow: auto;  
      width: 300px;
      height: 300px;
      background-color: blue;
    }
    .box {
      background-color: red;
      margin-top: 20px;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

margin-bottom传递

复现：如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素

此处，希望子盒子下方有一定边距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
    .container {
      width: 300px;
      height: auto;
      background-color: blue;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-bottom: 100px;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>
<div>测试margin-bottom传递</div>

解决方案

给父盒子设置padding-bottom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
  .container {
    width: 300px;
    height: auto;
    background-color: blue;
    padding-bottom: 100px;
  }

  .box {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>
<div class="container">
  <div class="box"></div>
</div>
<div>测试margin-bottom传递</div>

给父盒子设置border/border-bottom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
  .container {
    width: 300px;
    height: auto;
    background-color: blue;
    border: 1px solid transparent;
    /* 或者 */
    border-bottom: 1px solid transparent;
  }

  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-bottom: 100px;
  }
</style>
<div class="container">
  <div class="box"></div>
</div>
<div>测试margin-bottom传递</div>

触发BFC

BFC：block formating context（块级格式化上下文）

触发BFC：设置overflow的值为auto

给父盒子设置一个独立的空间，盒子内部子盒子得布局不受外界影响。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
  .container {
    width: 300px;
    height: auto;
    background-color: blue;
    overflow: auto;
  }

  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-bottom: 100px;
  }
</style>
<div class="container">
  <div class="box"></div>
</div>
<div>测试margin-bottom传递</div>

margin的折叠

垂直方向上相邻的2个margin (margin-top、margin-bottom)有可能会合并为1个margin，这种现象叫做collapse(折叠，BFC所引起，参看CSS学习笔记（七））

折叠后得计算规则：两者取其大

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
  div {
    width: 100px;
    height: 100px;
  }

  .box {
    background-color: red;
    margin-bottom: 10px;
  }


  .box2 {
    background-color: blue;
    margin-top: 20px;
  }
</style>
<div class="box"></div>
<div class="box2"></div>

解决方案：仅给一个盒子设置margin