【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之一:包含块(containing block)

上个帖子中对可视化格式模型做了一个概述,并简单的介绍了一下包含块的概念,在这里: 【分享】说说标准 --CSS中非常重要的可视化格式模型(visual formatting model)简介  。

这个帖子会就包含块的细节给出详细的讲解。

上回贴说到,一个元素box的定位和尺寸,有时候会跟某一矩形框有关,这个矩形框,就被称作元素的包含块。而元素会为它的子孙元素创建包含块,那么,是不是说,元素的包含块就是它的父元素呢?答案是否定的,这是一个误区。也正因为如此,才会有专门的一帖来说明它。

一个元素包含块的确定,跟元素自身和它的祖先元素的样式等有关系。

根元素的包含块

根元素,就是处于文档树最顶端的元素,它没有父节点。

根元素存在的包含块,被叫做初始包含块 (initial containing block)。具体,跟用户端有关。
  ●在(X)HTML中,根元素是html元素(尽管有的浏览器会不正确地使用body元素)。
  ●而初始包含块的direction属性与根元素相同。

“static”和”relative”定位的元素

对于其它元素:如果该元素的定位(position)为 “relative” (相对定位)或者 “static”(静态定位),它的包含块由它最近的块级、单元格 (table cell)或者行内块(inline-block)祖先元素的内容框创建。

关于内容框,见: 【分享】说说标准 —— 你真的了解盒子模型(box model)吗?

元素如果未声明 “position” 特性 ,那么就会采用 “position” 的默认值 ”static”。所以,一般元素都是静态定位的。

比如:
HTML code
   
   
< table id ="table1" > < tr > < td id ="td1" > < div id ="div1" style ="padding:20px;border:1px solid red;" > < span > < strong id =”greed” style ="position:relative;" > greed is </ strong > good 999999 </ span > </ div > </ td > </ tr > </ table >
其中, 以上代码中,元素包含块表为:

SPAN元素中包含的文本在div1中的位置可以看出,div1创建的包含块的区域是它的内容边界,也就是内边界。

“position:fixed” 定位的元素

如果元素是固定定位 (“position:fixed”) 元素,那么它的包含块是当前可视窗口。

'position: absolute' 定位的元素

如果元素是绝对定位(”position: absolute”)元素,包含块由离它最近的 position 属性为 “absolute”、“relative” 或者 “fixed” 的祖先元素创建。

1. 如果其祖先元素是行内元素,则包含块取决于其祖先元素的 “direction” 特性

● 如果 'direction' 是 'ltr',包含块的顶、左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges) ,右、下边是祖先元素生成的最后一个框的右、下内边距边界(padding edges) 。
例如:
HTML code
   
   
< p style ="border:1px solid red; width:200px; padding:20px;" > T < span style ="background-color:#C0C0C0; position:relative;" > 这段文字从左向右排列,红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素,它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。 < em style ="position:absolute; color:red; top:0; left:0;" > XX </ em > < em style ="position:absolute; color:yellow; top:20px; left:0;" > XX </ em > < em style ="position:absolute; color:blue; bottom:0; right:0;" > XX </ em > </ span > </ p >
以上代码中,文字采取默认从左到右的方式排列。红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素,它的包含块是相对定位的SPAN。它们定位需要参照包含块,按照标准来说,它们包含块的左顶边是 SPAN形成的第一个框(即第一行的灰色部分)的顶、左内边距边,包含块的右、下边是SPAN 生成的最后一个框(最后一行灰色的部分)的右、下内边距边界。
图示:

行内元素内形成的包含块,在各浏览器中各不相同,存在兼容性问题。可以通过上面的例子可以证明这一点。蓝色的 “XX”的位置在各浏览器中都不一样。你可以打开浏览器试一下。

当行框是这样的时候,比较纠结:
HTML code
   
   
< p style ="border:1px solid red; width:200px; padding:20px;" > TEXT TEXT TEXT < span style ="background-color:#C0C0C0; position:relative;" > 这段文字从左向右排列,红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素,它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。 < em style ="position:absolute; color:red; top:0; left:0;" > XX </ em > < em style ="position:absolute; color:yellow; top:20px; left:0;" > XX </ em > < em style ="position:absolute; color:blue; bottom:0; right:0;" > XX </ em > </ span > </ p >
包含块区域:

这时,会造成包含块的宽度为负。这时,绝对定位元素定位起来,肯定也很纠结。

● 如果 'direction' 是 'rtl',包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界(padding edges) ,左、下边是祖先元素生成的最后一个框的左、下内边距边界(padding edges) 。
例如:
HTML code
   
   
< p style ="border:1px solid red; width:200px; padding:20px; direction:rtl;" > T < span style ="background-color:#C0C0C0; position:relative;" > 这段文字从右向左排列,红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素,它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们…… < em style ="position:absolute; color:red; top:0; left:0;" > XX </ em > < em style ="position:absolute; color:yellow; top:20px; left:0;" > XX </ em > < em style ="position:absolute; color:blue; bottom:0; right:0;" > XX </ em > </ span > </ p >
以上的包含块范围:


2. 其他情况下,如果祖先元素不是行内元素,那么包含块的区域应该是祖先元素的内边距边界。

例如:
HTML code
   
   
< div id =”container” style ="padding:50px; background-color:#c0c0c0; position:relative; width:200px; height:200px;" > < div id =”div1” style ="width:100%;height:100%;border:2px solid blue;" > < div id =”content” style ="border:1px solid red; position:absolute; left:0; top:0;" > absolute element </ div > </ div > </ div >
如上代码中,content的父元素虽是 div1,但,按照标准它的包含块应该是 container。

如果不存在这样的祖先元素,那么它的包含块就是初始包含块。

流程图



W3C 官方例子

HTML code
   
   
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" > < 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 >
元素包含块表为:


这个概念比较复杂,但最重要的是 弄清楚,包含块是由哪个祖先元素创建的,以及创建的包含块区域。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值