基本概念

包含块模型可以理解成一个矩形区域，这个矩形区域的作用是，为它里面包含的元素提供一个参考。一个元素大小和位置的计算，往往是由该元素所在的包含块决定的。
实际上，我们在工作中，都曾使用过包含块，比如，为一个元素设置百分比的宽度，那么这个宽度是相对于父元素进行计算的；或者，为一个元素设置绝对定位，我们很自然会想到为其父元素设置一个相对定位。

例子：

<style>
    div {
        width: 200px;
        background: #ccc;
    }
    
    p {
        width: 50%;
        background: #fd0;
    }
</style>

<div>
    <p>hello</p>
</div>

确认元素的包含块

正确找出一个元素的包含块，需要依赖元素的 Position 属性，具体可以分为以下 4 种情况：

1.根元素( html 元素 )的包含块被称为初始包含块，由浏览器自行生成，通常它的大小就是网页的可视区域。

2.如果元素的 Position 属性值为" static( 默认值，表示标准文档流 ) “或者” relative "，那么它的包含块就是最近的、块级或内联块级祖先元素的内容区域( Content )。

例子：

<style>
    div {
        width: 200px;
        height: 40px;
        padding: 5px;
        background: #ccc;
    }
    
    span {
        display: inline-block;
        width: 50%;
        height: 50%;
        background: #fd0;
        position: relative;
        left: 0;
        top: 0;
    }
</style>

<div>
    <span>hello</span>
</div>

例子中，我们可以看到，span 元素的宽高和位置( 0,0 )，都是根据块级元素 div 的内容区域进行计算的。

3.如果元素的 Position 属性值为" fixed "，那么该元素的包含块就是初始包含块。

例子：

<style>
    span {
        width: 50%;
        height: 50%;
        background: #fd0;
        position: fixed;
        left: 0;
        top: 0;
    }
</style>

<span>hello</span>

例子中，我们可以看到，span 元素的宽高和位置( 0,0 )，都是根据初始包含块进行计算的。

4.如果元素的 Position 属性值为" absolute “，那么它的包含块由最近的、含有属性值” absolute “、” relative “或者” fixed "的祖先元素决定，具体规则如下：

①如果其祖先元素是内联元素，那么该元素的包含块是其祖先元素包含的第一个和最后一个" 内联盒子 "的内边距区域( Padding＋Content )。

例子：

<style>
    label {
        position: relative;
        padding: 5px;
        color: #ddd;
    }
    
    b {
        width: 50%;
        height: 50%;
        background: #E91E63;
        font-size: 12px;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

<label>
    AAA<b>BBB</b><i>CCC</i>
</label>

例子中，我们可以看到，b 元素的宽高和位置( 0,0 )，都是根据第一个( 文字也会生成内联盒子 )和最后一个( i 元素 )" 内联盒子 "组成的包含块进行计算的。

*如果内联盒子出现换行的情况，按照定义，依然会根据第一个和最后一个" 内联盒子 "组成的包含块进行计算。

例子：

<style>
    label {
        position: relative;
        padding: 1px;
        color: #ddd;
    }
    
    b {
        width: 50%;
        height: 50%;
        background: #E91E63;
        font-size: 12px;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

<label>
    AAAA<br><b>B</b><i>CC</i>
</label>

②如果其祖先元素是块级元素，那么该元素的包含块则是其祖先元素的内边距区域（Padding＋Content）。

例子：

<style>
    div {
        width: 200px;
        height: 100px;
        position: relative;
        padding: 5px;
        background: #ccc;
    }
    
    span {
        width: 50%;
        height: 50%;
        background: #E91E63;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

<div>
    <span>hello</span>
</div>

例子中，我们可以看到，span 元素的宽高和位置( 0,0 )，都是根据块级元素 div 的内边距+内容区域进行计算的。

③如果不存在已定位的祖先元素，则其包含块为初始包含块。

例子：

<style>
    span {
        width: 50%;
        height: 50%;
        background: #E91E63;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

<div>
    <span>hello</span>
</div>

例子中，我们可以看到，span 元素的宽高和位置( 0,0 )，都是根据初始包含块进行计算的。

如有错误，欢迎指正，本人不胜感激。