总结

# 包含块(containing block)

元素的尺寸和位置，会受到其包含块的影响，比如width,padding,margin,定位元素的left,bottom等等。

# 1. 初始包含块(initial containing block)

HTML元素所在的包含块，也就是视口大小。

# 2.1 position 为 relative 或者 static,其包含块为离最近的块级容器。

<style>
  .container {
    width: 200px;
    height: 200px;
    border: 1px solid red;
  }
  .item {
    width: 50%;
    height: 50%;
    border: 1px solid blue;
  }
</style>
<div class="container">
  <div class="item"></div>
</div>

item的包含块就是container。

# 2.2 position 为 fixed,其包含块为视口。

<style>
  .container {
    width: 200px;
    height: 200px;
    border: 1px solid red;
  }
  .item {
    position: fixed;
    width: 50%;
    height: 50%;
    border: 1px solid blue;
  }
</style>
<div class="container">
  <div class="item"></div>
</div>

item的包含块就是视口，宽度和高度都是视口的一半。

# 2.3 position 为 absolute,其包含块为最近的 position 不为 static 的祖先元素内边距边缘组成。

<style>
  .container {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid red;
  }
  .item1 {
    width: 50%;
    height: 50%;
    border: 1px solid blue;
  }
  .item2 {
    position: absolute;
    width: 50%;
    height: 50%;
    border: 1px solid yellow;
  }
</style>
<div class="container">
  <div class="item1">
    <div class="item2"></div>
  </div>
</div>

item2的包含块为最外层container。

# 2.4 position 为 absolute 或 fixed,当父元素满足下列条件时，也作为其包含块。

  1. transform 或 perspective 的值不是 none
  2. will-change 的值是 transform 或 perspective
  3. filter 的值不是 none 或 will-change 的值是 filter(只在 Firefox 下生效).
  4. contain 的值是 paint (例如: contain: paint;)
<style>
  .container {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid red;
  }
  .item1 {
    width: 50%;
    height: 50%;
    border: 1px solid blue;
    transform: translateX(100px);
  }
  .item2 {
    position: absolute;
    width: 50%;
    height: 50%;
    border: 1px solid yellow;
  }
</style>
<div class="container">
  <div class="item1">
    <div class="item2"></div>
  </div>
</div>

虽然container为relative, 但当给item1属性transform时离得更近，item2的包含块变成了item1。

← margin →