As far as I know, this would make the outer div the containing block for the inner div for all intents and purposes (as defined in the spec - 10.1.4), (据我所知,这将使外部div成为内部div的包含块,用于所有意图和目的(如规范-10.1.4中所定义),)
This is true, the containing block of inside
is header
(是的, inside
的包含块是header
)
and therefore "supply" the inner content to the outer div and stretch it. (因此将内部内容“提供”到外部div并进行拉伸。) This would ostensibly result in the outer div's bg-color to show (表面上这将导致外部div的bg颜色显示)
inside
is also an inner content of header but it has position:absolute
so it's out of the flow and doesn't affect the layout of it's containing block. (inside
也是标头的内部内容,但是它具有position:absolute
因此它不在流程中,并且不会影响其包含块的布局。)
From the specification you can read: (从规范中,您可以阅读:)
In the absolute positioning model, a box is explicitly offset with respect to its containing block. (在绝对定位模型中,框相对于其包含的块显式偏移。) It is removed from the normal flow entirely (it has no impact on later siblings). (它已从正常流中完全删除 (它对以后的同级没有影响)。) An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. (绝对定位的框为正常流子和绝对(但不固定)定位的后代建立了一个新的容纳块。) However, the contents of an absolutely positioned element do not flow around any other boxes. (但是,绝对定位的元素的内容不会在其他任何框周围流动。) They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes. (它们可能会使另一个盒子的内容模糊(或自身被遮盖),具体取决于重叠盒子的堆叠高度。)
Then you can read here how width is calculated for absolute element and you will consider this rule: (然后,您可以在此处阅读如何计算绝对元素的宽度,并考虑以下规则:)
If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; (如果'left','width'和'right'的全部三个均为'auto':首先将'margin-left'和'margin-right'的所有'auto'值设置为0。然后,如果'direction'为建立静态位置包含块的元素的属性是'ltr',将'left'设置为静态位置并应用下面的规则编号3;) otherwise, set 'right' to the static position and apply rule number one below. (否则,将“ right”设置为静态位置并应用下面的规则编号1。)
- ... then the width is shrink-to-fit . (...然后宽度缩小以适合 。) ... (...)
Then you can see the detail of shrink-to-fit which is similar to inline-block, float, etc and since we have no in-flow content, it will result to 0 like you noticed. (然后,您可以看到与内嵌块,浮动等类似的缩小至配合的细节,并且由于我们没有流入量,因此如您注意到的那样,结果将为0。)
Same logic for height calculation. (高度计算的逻辑相同。)
Basically, the containing block definition and how width/height are calculated are two different concepts. (基本上,包含块的定义以及宽度/高度的计算方式是两个不同的概念。) The containing block define a kind of reference for an element in order to place it or calculate its width/height but being a containing block of an element doesn't mean that the width/height will be different from 0. (包含块为元素定义了一种引用,以便放置元素或计算元素的宽度/高度,但是作为元素的包含块并不意味着宽度/高度将不同于0。)
Here is another intresting example where I will make the inside element width:100%
and it will be equal to 0
because its containing block is having a width equal to 0
(our reference for calculation) (下面是另一个intresting示例,其中我将会使内部元件width:100%
这将是等于0
,因为其包含块由具有的宽度等于0
(我们的计算基准))
body { background-color: #990e82; } #header { background-color: #579900; position: absolute; } #inside { position: absolute; top: 0; left: 0; width: 100%; background: red; }
<body> <div id="header"> <div id="inside">hjhkjh</div> </div> </body>