包含块模型

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

例子：

    div {
 width: 200px;
 background: #ccc;
    }
    
    p {
 width: 50%;
 background: #fd0;
    }



    
hello

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

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

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

例子：

    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;
    }



    hello

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

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

例子：

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


hello

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

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

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

例子：

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



    AAABBBCCC

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

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

例子：

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



    AAAA
BCC

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

例子：

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



    hello

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

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

例子：

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



    hello

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

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