Question

<style type="text/css">
body > div {
    display: inline;
    position: relative;
}
body > div > div {
    position: absolute;
}
</style>
<div>
    <div></div>
</div>

内部div的确切包含块是什么？

在祖先是内联元素的情况下，包含块是为该元素生成的第一个和最后一个内联框的填充框周围的边界框。在CSS 2.1中，如果内联元素被分割为多行，则包含的块是未定义的。

＆＃34;＆＃34;是为该元素生成的第一个和最后一个内联框的填充框周围的边界框＆＃34;在上面的文字中？

Answer 1

内联元素不能“包含”传统意义上的块级框。会发生的是内联元素被拆分为单独的内联框，它们位于围绕块级框的匿名块框中。请参阅第一个示例后的section 9.2.1.1：

当内联框包含一个流内块级别框时，内嵌框（及其同一行框内的内联祖先）在块级框（以及任何连续的块级兄弟）中被打破。仅由可折叠的空白和/或流出元素分隔），将内联框分成两个框（即使任一边为空），块级框的每一边一个。中断前和中断后的行框都包含在匿名块框中，块级框成为这些匿名框的兄弟。当这样的内联框受到相对定位的影响时，任何结果转换也会影响内联框中包含的块级框。

（这里没有翻译，所以最后一句话是无礼的。）

然而，你的情况稍微有点特别，因为外部div的开始标记和内部div的开始标记之间的仅事物，以及内部div和结束标记的结束标记外部div是元素间空格（包括换行符和缩进），在正常情况下得到collapsed。因此生成的内联框最终为

空，
位于相同位置：与strut相同的位置。

由于内联元素没有填充，因此空内联框的填充框的长度为零，乘以行高。（请注意，当您检查外部div时，某些浏览器开发人员工具可能会将其渲染为由十字准线标记的单个点。）内部（绝对定位）div的包含块由这些填充框组合的周边定义，并且任何内部div（顶部，右侧，底部，左侧）的偏移量相对于该周长。但请注意，由于内联框实际上没有内容，因此内部div的实际位置与外部div相同，外部div具有内容。

在包含块是内联的情况下，绝对定位元素的确切包含块是什么？

1 个答案: