首页 > 代码库 > 关于Containing block

关于Containing block

一、什么是containing block

Containing block,翻译成中文也就是包含块,在CSS的visual formatting model(可视化模型)中是个很重要的概念,因为盒子的宽度/高度的自动值/相对值的计算,相对/浮动/绝对定位,都要依赖containing block。

二、如何判断盒子的containing block

containing block的判定很重要,熟悉理解了各种position下盒子的containing block,可以方便我们更快速的布局。一图胜千言,理解了下面这张图,关于containing block基本也理解透彻了。

技术分享

  (图片来自http://w3help.org/zh-cn/kb/008/)

下面分类说明:

根元素

根元素,是处于文档树顶端的元素,在(X)HTMl中,根元素就是html元素,它没有父节点。

根元素的包含块,叫做initial containing block(初始包含块),它的direction属性与html元素一致,它的尺寸与定位与VIewport一致(一致但并不等同),而Viewport尺寸固定为浏览器的工作区域尺寸 - 垂直/水平滚动条尺寸。(更详细的解释参考http://www.cnblogs.com/fsjohnhuang/p/5295859.html)

静态定位元素和相对定位元素

position为relative或者static的元素(未声明position的元素默认为static),它的包含块由它最近的块级、单元格(table cell)或者行内框(inline-block)祖先元素的内容框(content box)创建。

固定定位元素

固定定位(fixed)的元素,它的包含块是当前可视窗口。

绝对定位元素

总的来说,绝对定位(absolute)元素的包含块由离它最近的position为非static的祖先元素创建,根据情况可分类:

1.如果没有非static祖先元素,那么它的containing block就是initial containing block(初始包含块)。

2.存在非static祖先元素,且祖先元素为行内元素,则

  • 若祖先元素的direction为ltr(left to right),那么绝对定位元素的包含块的顶、左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges) ,右、下边是祖先元素生成的最后一个框的右、下内边距边界(padding edges)  (祖先元素的第一个元素左上,最后元素右下)
  • 若祖先元素的direction为ltr(left to right),那么绝对定位元素的包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界 (padding edges) ,左、下边是祖先元素生成的最后一个框的左、下内边距边界 (padding edges)(祖先元素的第一个元素右上,最后元素左下)
  • 此条内容图例解释可参考http://w3help.org/zh-cn/kb/008/

    3.祖先元素不是行内元素,那么包含块的的区域是祖先元素的内边距边界(padding edges)

    三、最后

    总结本文参考了以下几篇文章:

    containing block   http://www.cnblogs.com/chengzhenping/p/3488107.html

    KB008: 包含块( Containing block )   http://w3help.org/zh-cn/kb/008/

    CSS魔法堂:不得不说的Containing Block  http://www.cnblogs.com/fsjohnhuang/p/5295859.html

    感谢前人栽阴!

    关于Containing block