[css 规范] 包含块(containing block)

时间 2020-04-11

标签 css 规范包含 containing block 栏目 CSS 繁體版

原文原文链接

简介

包含块是 css 中的一个很重要的概念, 简单来讲一个元素应该在什么位置展现和定位? 应该在包含块内, 那么如何找到给定元素的包含块, 即是该章节讨论的问题.css

另外这篇文章不是源规范的标准翻译, 不过重要的部分我就忽略了, 修改了一些表格之类的东西, 还加入了一些个人思考. 若是追求严谨能够去查看源规范.html

包含块(containing block)

https://drafts.csswg.org/css2...

元素所对应的盒子(element's box) 的位置和大小有时是相对于特定的矩形进行计算的, 这个矩形被称为这个元素的包含块. 包含块的定义以下:spa

根元素所在的包含块是一个被称为初始包含块的矩形. 对于连续媒体，它具备视口(viewport)的尺寸，并锚定在画布原点；它是分页媒体的页面区域。初始包含块的“direction”属性与根元素的“direction”属性相同。
对于其余元素，若是元素的 positiion 是 relative 或 static ,由离它最近的块容器(block container)的内容区域(content area)的边缘创建.
若是元素的定位使用 fixed 包含块对于连续媒体由视口创建, 对于分页媒体由页面区域创建.
若是元素使用了 absolute 定位, 则包含块由最近使用了 absolute fixed relative 的父元素经过下列方式创建翻译
1. 若是该父元素是内联元素(inline element)，则包含块是围绕该父元素的第一个和最后一个内联盒子的 padding 盒子生成的边界盒子。在CSS 2中，若是内联元素分割成了多行，这种状况下包含块没有被定义。 **
2. 不然就是该父元素的 padding 的边缘
3. 若是不存在使用定位的父元素那么包含块就是初始包含块

** 对应的状况可能入下方代码所示:code

<span style='background:aqua;position:relative;padding:10px'>hello <em style="background:white;position:absolute;top:0;left:0;">world</em>!</span>

In paged media, an absolutely positioned element is positioned relative to its containing block ignoring any page breaks (as if the document were continuous). The element may subsequently be broken over several pages.htm

For absolutely positioned content that resolves to a position on a page other than the page being laid out (the current page), or resolves to a position on the current page which has already been rendered for printing, printers may place the contentelement

on another location on the current page,

on a subsequent page, or

may omit it.

在下面的例子中的包含块没有使用任何定位:get

<!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>

对于页面中的元素, 指出对应的包含块:it

元素	包含块	知足条件
html	初始包含块	根元素
body	html	2
div1	body	2
p1	div1	2
p2	div1	2
em1	p2	2
strong1	p2	2

设置如下 css:io

#div1 { position: absolute; left: 50px; top: 50px }
#em1  { position: absolute; left: 100px; top: 100px }

对于页面中的元素, 指出对应的包含块:

元素	包含块	知足条件
html	初始包含块	根元素
body	html	2
div1	html	4.c
p1	div1	2
p2	div1	2
em1	div1	4.b
strong1 **	em1	2

** 这里在规范中很模糊至少我没有找到完整的相关描述. 总的来说 strong1 的包含块是 em1 的缘由是 em1 绝对定位了, 而条件 2 的说法是相对于 block container 的, 可是在规范中, 绝对定位元素仅仅被描述为能够创建块级格式化上下文, 而块级格式化上下文并无说明内部是否必须都是是块级盒子(block-level box), 块级盒子部分也只说明它能够参与块级格式化上下文的创建, 最关键的是 block container 的定义是仅仅能包含块级盒子, 因此没有关键证据指出 em1 此时是 block container.

因此产生一个问题 "containing box 是否就是 block container" ?

问题更新

https://www.w3.org/TR/CSS22/v...

在 css2.2 规范中指明了 block-level 就是 block container.

因此文字如今成为了:

问题在于 containing box 是否就是 block container
以及 containing box 是否就是 block-level box

另外我查阅了最新的 CSS3 规范草案和定位章节目前没有找到合理的解释.