包含块(containing block)学习

来源:互联网 发布:小米6数据网络不稳定 编辑:程序博客网 时间:2024/05/16 14:58

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

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/


<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>