【css规范】包含块（containingblock）
时间：2023-04-05 19:57:48
HTML5
简介包含块是CSS中一个非常重要的概念。简单的说，一个元素应该在哪里显示和定位？它应该在包含块内，那么如何找到给定元素的包含块就是本章要讨论的问题。另外，本文不是源规范的标准翻译。忽略了不太重要的部分，修改了一些表格之类的，补充了一些自己的想法。如果追求严谨，可以查看sourcespecification。包含块https://drafts.c??sswg.org/css2...元素对应的元素的框的位置和大小有时是相对于一个特定的矩形来计算的，这个矩形就叫做这个元素的包含块。包含块定义如下：根元素所在的包含块是一个矩形，称为初始包含块。对于连续媒体，它具有视口（viewport）大小，并锚定在画布原点；就是分页媒体的页面区域。初始包含块的“direction”属性与根元素的“direction”属性相同。对于其他元素，如果该元素的位置是相对的或静态的，则由距离它最近的块容器（blockcontainer）的内容区域（contentarea）的边缘建立。如果元素的定位使用固定的包含块，则对于连续媒体由视口建立，对于分页媒体由页面区域建立。如果元素使用绝对定位，则包含块由最近使用绝对固定相对的父元素按以下方式建立。如果父元素是内联元素，则包含块是围绕该父元素的第一个和最后一个内联框的填充框生成的边界框。在CSS2中，如果内联元素被拆分成多行，则在这种情况下不会定义包含块。**否则就是父元素的paddingedge。如果没有使用定位的父元素，则包含块为初始包含块**对应的情况可能如下代码所示：helloworld!在分页媒体中，绝对定位的元素相对于其包含块定位，忽略任何页面中断（就好像文件是连续的）。该元素随后可能会被分成几页。对于绝对定位的内容解析到页面上的位置而不是正在布局的页面（当前页面），或者解析到当前页面上已经呈现以供打印的位置，打印机可以将内容放在另一个位置上当前页面，在后续页面上，或者可以省略它。在下面的示例中，包含块没有使用任何定位：包含块的说明这是第一段中的文字...
这是文字在second段落中。 用于页面中的元素,指出对应的包含块：元素包含块满足条件html初始包含块根元素bodyhtml2div1body2p1div12p2div12em1p22strong1p22设置如下css：#div1{position:absolute;左：50px；顶部：50px}#em1{位置：绝对；左：100px；top:100px}对于页面中的元素，指出对应的包含块：元素包含块满足条件html初始包含块根元素bodyhtml2div1html4.cp1div12p2div12em1div14.bstrong1**em12**这个在规范中很模糊至少我没有找到完整的描述。一般来说，strong1的包含块之所以是em1是因为em1是绝对定位的，条件2的语句是相对于块容器的，但是在规范中，绝对定位的元素只是描述为能够建立ablock-levelformattingcontext，而block-levelformattingcontext并没有指定里面是否一定是块级框（block-levelbox），block-levelbox部分只表示可以参与建立块级格式化上下文。最关键的是block容器的定义，它只能包含block级别的boxes，所以此时并没有em1是block容器的关键证据。那么问题来了“容器是不是块状容器”？问题更新https：//www.w3.org/TR/CSS22/v...css2.2规范中规定block-level为块容器。所以现在的文字变成了：问题是containingbox是不是blockcontainer和containingbox是不是block-levelbox另外我查了最新的CSS3规范草案和定位章节，也没有找到合理的解释迄今为止。
