CSS包含块containing block详解
“包含块(containing block)”,W3c中一个很重要的概念,今天带大家一起来好好研究下。
初步理解
在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称作是包含块( containing block )。 一般来说,(元素)生成的框会扮演它子孙元素包含块的角色,我们称之为:一个(元素的)框为它的子孙节点建造了包含块。包含块是一个相对的概念。
<div>
<table>
<tr>
<td>hi</td>
</tr>
</table>
</div>
以上代码为例,DIV 和 TABLE 都是包含块。DIV 是 TABLE 的包含块,同时 TABLE 又是 TD 的包含块,不是绝对的。
“一个框的包含块”,指的是“该框所存在的那个包含块”,并不是它建造的包含块。比如,上述代码中,TABLE 的包含块,说的是 DIV 建造的包含块,而不是 TABLE 自身建造的包含块。TABLE 建造的包含块,可以称作 TD 的包含块。
每个框关于它的包含块都有一个位置,但是它不会被包含块限制;它可以溢出(包含块)。包含块上可以通过设置 ‘overflow’ 特性达到处理溢出的子孙元素的目的。
包含块的概念很重要,因为可视化格式模型中很多的理论性知识都跟这个概念有关系,比如,宽度高度自动值的计算,浮动元素的定位,绝对定位元素的定位等等。不了解包含块,就掌握不好以它为基础的后续理论。
官方定义
The position and size of an element’s box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element.
一个元素的盒模型的定位、尺寸常常会依据某个矩形(box)来计算,这个矩形就叫做这个元素的包含块(containing block)。
判定规则
- The containing block in which the root
element lives is a rectangle called the initial containing block. For continuous
media, it has the dimensions of the viewport and is anchored at the
canvas origin; it is the page area
for paged media. The ‘direction’ property of the initial
containing block is the same as for the root element.
页面中的根元素所存在的包含块,被称为初始包含块(initial containing block)
- For other elements, if the element’s position is ‘relative’ or ‘static’,
the containing block is formed by the content edge of the nearest
block container ancestor box.
如果一个元素的’position’为’relative’或’static’,那么其包含块则是由最近的块级或单元格或行内块级元素的内容区创建
- If the element has ‘position: fixed’, the containing block is
established by the viewport
in the case of continuous media or the page area in the case of paged media.
如果一个元素’position’为’fixed’,那么其包含块为当前屏幕的可视窗口
- If the element has ‘position: absolute’, the containing block is
established by the nearest ancestor with a ‘position‘ of ‘absolute’, ‘relative’
or ‘fixed’, in the following way
如果一个元素的’position’为’absolute’,那么其包含块则是最近的’position’为’relative’ 或’absolute’或 ‘fixed’的祖先元素,有如下几种情况:- In the case that the ancestor is an inline element, the containing
block is the bounding box around the padding boxes of the first and
the last inline boxes
generated for that element. In CSS 2.1, if the inline
element is split
across multiple lines, the containing block is undefined.
如果其祖先元素是行内元素,则包含块取决于其祖先元素的 “direction” 特性
- Otherwise, the containing block
is formed by the padding edge of the ancestor.
其他情况下,如果祖先元素不是行内元素,那么包含块的区域应该是祖先元素的内边距边界。
- In the case that the ancestor is an inline element, the containing
根据W3C的规定,我们可以用一张图来表达这个判定:
重点讲解
静态定位元素和相对定位元素
如果该元素的定位(position)为 “relative” (相对定位)或者 “static”(静态定位),它的包含块由它最近的块级、单元格(table cell)或者行内块(inline-block)祖先元素的 内容框创建。元素如果未声明 ‘position’ 特性,那么就会采用 ‘position’ 的默认值 “static”。
<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> fsdfd</span>
</div>
</td>
</tr>
</table>
包含块关系表:
元素 | 包含块 |
---|---|
table1 | body |
td1 | table1 |
div1 | td1 |
greed | div1 |
SPAN 元素中包含的文本在 div1 中的位置可以看出,div1 创建的包含块的区域是它的内容边界,也就是内边界。
固定定位元素
如果元素是固定定位 (“position:fixed”) 元素,那么它的包含块是当前可视窗口。
绝对定位元素
总的来说,绝对定位(”position: absolute”)元素的包含块由离它最近的 ‘position’ 属性为 ‘absolute’、’relative’ 或者 ‘fixed’ 的祖先元素创建。
如果其祖先元素是行内元素,则包含块取决于其祖先元素的 ‘direction’ 特性
1). 如果 ‘direction’ 是 ‘ltr’,包含块的顶、左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges) ,右、下边是祖先元素生成的最后一个框的右、下内边距边界(padding edges)
示例代码:
<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” 的位置在各浏览器中都不一样。(经测试,IE、opera、webkit内核浏览器都正常,火狐不正常)
包含块的宽度可能是负的。
示例代码:
<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>
示意图:
以上的边界无法围成一个区域,在这种情况下,包含块的宽度是负的。
2). 如果 ‘direction’ 是 ‘rtl’,包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界 (padding edges) ,左、下边是祖先元素生成的最后一个框的左、下内边距边界 (padding edges)
示例代码:
<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>
示意图:
其他情况下,如果祖先元素不是行内元素,那么包含块的区域应该是祖先元素的内边距边界
示例代码:
<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。
注意事项
- 在 (X)HTML 中,根元素是 html 元 素(尽管有的浏览器会不正确地使用 body 元素)
- 内容区指的是元素的内容,如文本,图形等,不包括paddingordermargin等
- 如果absolute的元素的非”static”的祖先元素是inline元素,需要判定direction的值来做出包含块的判定(但目前正常 的文档流方向都是ltr,除非你去刻意修改,在这种情况下包含块的topleftottom ight与最近的非static的tlbr边界是一 致的)
- 如果一个元素为fixed,这时它的包含块是可视窗口,这里的可视窗口是指浏览器正常的window视窗,当然这个视窗可以人为的缩放
参考资源:
http://w3help.org/zh-cn/kb/007/
http://w3help.org/zh-cn/kb/008/
http://www.w3.org/TR/CSS2/visuren.html#viewport
CSS包含块containing block详解的更多相关文章
- css包含块containing block
<css权威指南>P167: The Containing Block Every element is laid out with respect to its containing b ...
- css中margin重叠和一些相关概念(包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes )
平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...
- iOS开发——Block详解
iOS开发--Block详解 1. Block是什么 代码块 匿名函数 闭包--能够读取其他函数内部变量的函数 函数变量 实现基于指针和函数指针 实现回调的机制 Block是一个非常有特色的语法,它可 ...
- Block详解二(底层分析)
Block专辑: Block讲解一 MRC-block与ARC-block Block详解一(底层分析) 今天讲述Block的最后一篇,后两篇仅仅是加深1,2篇的理解,废话少说,开始讲解! __blo ...
- 包含块( Containing block ) 转自W3CHelp
包含块简介 在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称作是包含块( containing block ). 一般来说,(元素)生成的框会扮演它子孙元素包含块 ...
- “全栈2019”Java多线程第十八章:同步代码块双重判断详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- Block详解一(底层分析)
本篇博客不再讲述Block的基本定义使用,最近而是看了很多的block博客讲述的太乱太杂,所以抽出时间整理下block的相关底层知识,在讲述之前,提出几个问题,如果都可以回答出来以及知道原理,大神绕过 ...
- CSS学习笔记——包含块 containing block
以下内容翻译自CSS 2.1官方文档.网址:https://www.w3.org/TR/CSS2/visudet.html#strut 有时,一个元素的盒子的位置和尺寸根据一个确定的矩形计算,这个确定 ...
- CSS系列 (05):浮动详解
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...
随机推荐
- ASP Request.ServerVariables 参数集
转自:http://blog.csdn.net/chinmo/article/details/2096871 Request.ServerVariables("Url") 返回服务 ...
- python的闭包与装饰器
原文发表在我的博客主页,转载请注明出处 前言 如果把python当作脚本语言,每次就是写个几十行上百行来处理数据的话,装饰器也许不是很必要,但是如果要开发一个大型系统,装饰器是躲不开的,最开始体会ry ...
- unity3d 赛车游戏——复位点检测优化、反向检测、圈数检测、赛道长度计算
接着上一篇文章说 因为代码简短且思路简单 所以我就把这几个功能汇总为一篇文章 因为我之前就是做游戏外挂的 经过验证核实,**飞车的复位点检测.圈数检测就是以下的方法实现的 至于反向检测和赛道长度计算, ...
- hello-weapp 微信小程序最简示例教程
打开微信小程序官方开发文档,最好全篇看一遍,基本上就会了. 点击文档中 工具 选项卡中 下载工具页面 下载对应系统版本的微信开发者工具 注意:脱离微信开发者工具是不能调试的 好了,安装下工具即可打开, ...
- [Aaronyang] 写给自己的WPF4.5 失传的第一本古老秘籍[多扩展显示器编程]
世界上只有想不通的人,没有走不通的路 --Aaronyang的博客(www.ayjs.net)-www.8mi.me =============时隔两年后再看WPF,有些秘籍不太适合公开,公开了就不值 ...
- Mysql 调优小技巧
MySQL是一个功能强大的开源数据库.随着越来越多的数据库驱动的应用程序,人们一直在推动MySQL发展到它的极限.这里是101条调节和优化MySQL安装的技巧.一些技巧是针对特定的安装环境的,但这些思 ...
- yii2系统定义的常用路径别名
@yii 表示Yii框架所在的目录,也是 yii\BaseYii 类文件所在的位置: @app 表示正在运行的应用的根目录,一般是 digpage.com/frontend :物理路径 @vendor ...
- iOS关于rar解压第三方库Unrar4iOS使用总结
作者最近的公司项目要做实现rar解压的功能,在网上找了很久貌似关于rar解压的资料很少,不过有很多人推荐一个名叫“Unrar4iOS”的第三方开源框架,于是下载并尝试使用发现该开源框架并在使用过程中发 ...
- PLSQL中配置Oracle方法
在服务器上,用PL/SQL连接Oracle数据库时,出现了一个问题,提示: Initialization error Could not load "F:\oracle\bin\oci.dl ...
- poj 3311 tsp入门
题意:n+1个点:0--n,找一条路径从0点出发遍历1--n的点再回到0,每个点可经过不止一次,求最短路径 裸的TSP问题,先用Floyd求出各个点之间最短路,再状压dp即可 用n+1位二进制表示状态 ...