包含块（containing block）学习

一下均为个人理解，如果错误还望大家指正.

1.块元素的定义

   个人认为，块元素就是一个矩形框，作为参考，可以便于内部的元素定位和尺寸的计算。

    在浏览器生成显示的页面的时候，每一个框都有一个定位，这个定位受其包含快的影响，不过它不被包含块所限制，而且可能会溢出到包含快之外。

2.包含快的确定

    1.跟预算怒存在的包含快成为初始包含快；

     2.如果元素的定位（position）为relative或者static，它的包含块由它最近的快级、单元格（table cell）或者行内快（inline-block）祖先元素的内容框创建。

    3.如果元素的定位（position）为fixed，包含块由视口创建。

    4.如果元素的定位（position）为absolute，包含块由最近的position属性为absolute、relative、fixed的祖先元素创建。

    用图表示为：

    

参考资料：

http://www.ddcat.net/blog/?p=1336

http://www.smallni.com/containing-block/

转载于:https://www.cnblogs.com/shamoguying1140/archive/2013/04/12/3017249.html