CSS包含块(Containing Block)
来源:互联网 发布:ubuntu tar 编辑:程序博客网 时间:2024/05/21 17:03
包含块(Containing Block)是视觉格式化模型的一个重要概念,它与框模型类似,也可以理解为一个矩形,而这个矩形的作用是为它里面包含的元素提供一个参考,元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。
包含块简单说就是定位参考框,或者定位坐标参考系,元素一旦定义了定位显示(相对、绝对、固定)都具有包含块性质,它所包含的定位元素都将以该包含块为坐标系进行定位和调整。
原理
一个元素盒子的位置和大小有时是通过相对于一个特定的长方形来计算的,这个长方形就被称之为元素的 containing block。一个元素的 containing block 按以下方式定义:
- 用户代理(比如浏览器)选择根元素作为 containing block(称之为初始 containing block)。
- 对于其它元素,除非元素使用的是绝对位置,containing block 由最近的块级祖先元素盒子的内容边界组成。
- 如果元素有属性 'position:fixed',containing block 由视口建立。
- 如果元素有属性 'position:absolute',containing block 由最近的 position 不是 static 的祖先建立,按下面的步骤:
- 如果祖先是块级元素,containing block 由祖先的 padding edge 形成。
- 如果祖先是内联元素,containing block 取决于祖先的 direction 属性。
- 如果 direction 是 ltr(左到右),祖先产生的第一个盒子的上、左内容边界是 containing block 的上方和左方,祖先的最后一个盒子的下、右内容边界是 containing block 的下方和右方。
- 如果 direction 是 rtl(右到左),祖先产生的第一个盒子的上、右内容边界是 containing block 的上方和右方,祖先的最后一个盒子的下、左内容边界是 containing block 的下方和左方。
如果没有祖先,根元素盒子的内容边界确定为 containing block。
例子
<HTML>
<HEAD>
<TITLE>Illustration of containing blocks</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">This is text in the first paragraph…</P>
<P id="p2">This is text <EM id="em1"> in the
<STRONG id="strong1">second</STRONG> paragraph.</EM></P>
</DIV>
</BODY>
</HTML>
<HEAD>
<TITLE>Illustration of containing blocks</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">This is text in the first paragraph…</P>
<P id="p2">This is text <EM id="em1"> in the
<STRONG id="strong1">second</STRONG> paragraph.</EM></P>
</DIV>
</BODY>
</HTML>
没有指定 position,上方的代码的 containing blocks (C.B.) 确定方式如下:
如果我们设置 div1 的 position:
#div1 { position: absolute; left: 50px; top: 50px }
div1 的 containing block 就不再是 body,它变成了初始 containing block(因为这里还没有具有 position 的祖先盒子)。
如果我们按如下方式放置 em1:
#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }
#em1 { position: absolute; left: 100px; top: 100px }
containing blocks 变成如下:
通过放置 em1,它的 containing block 变成了最近的具有 position 的祖先盒子(也就是:div1)。
名词解释
根元素-源文件中,每一个元素都有一个父元素,只有一个例外,它就是根元素。
视口-通过解析文档,连续媒体(比如屏幕就是连续媒体,而打印机则是基于页的媒体)给用户产生一个视口(一个窗口或其它在屏幕上显示的区域)。
padding edge-请参见下图:
0 0
- CSS核心:包含块(Containing Block)
- 什么是CSS包含块(Containing Block)
- CSS包含块(Containing Block)
- CSS概念之包含块(containing block)
- 浅谈CSS包含块Containing Block
- css笔记:包含块(Containing Block)
- 包含块(containing block)学习
- CSS包含块(the containing block)和与之相关的百分比属性
- css 包含块(Containing Box)
- 关于包含块(containing block)的理解
- Definition of "containing block" 细说包含块
- 【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之一:包含块(containing block)
- CSS中的containing block
- Containing Block
- css-包含块
- 什么是CSS包含块
- CSS中包含块
- containing block's height
- UIView中的各种坐标转换convertPoint:toView OR convertPoint:fromView
- HTML5基础篇之html(二)
- linux qcom LCD framwork
- 如何由RGB计算HSV空间的色相值
- Android——数据存储(四种方式之二)读写SD卡
- CSS包含块(Containing Block)
- 【学习笔记】接口
- 高性能协程库State Thread Library源代码剖析之一Makefile详解
- 飞行路线_bzoj2763_分层图+spfa
- Java集群优化——dubbo+zookeeper构建高可用分布式集群
- Javascript验证方法大全
- RxJava操作符(9)-连接
- Javascript创建对象
- 基础篇-View事件传递与绘制机制,自定义View实现理解