包含块(containing block)学习

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

1.块元素的定义

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

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

2.包含快的确定

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

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

    3.如果元素的定位(position)为fixed,包含块由视口创建。

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

    用图表示为:

    包含块(containing block)学习_第1张图片

参考资料:

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

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


你可能感兴趣的:(包含块(containing block)学习)