为什么table-layout:fixed会影响父元素的宽度？

Question

有人可以解释为什么我div与table-layout:fixed正在改变它的父元素的宽度(body在这种情况下),使其100%时,它不应该是100%,因为它的定位？

body {
  border: 2px solid red;
  height: 100vh;
  margin:0;
  padding: 0;
  position: absolute;
}

.c{
  display: table;
  width: 80%; /* Any percentage value different from 0 */
  table-layout:fixed;
  outline: 2px solid blue;
}

<div class="c">d</div>

正如你可以在上面看到,增加table-layout:fixed迫使身体是全宽和百分比width上div会相对工作到width的body!

以下片段不是这种情况,其行为在某种程度上是合乎逻辑且直观的:

body {
  border: 2px solid red;
  height: 100vh;
  margin:0;
  padding: 0;
  position: absolute;
}

.c{
  display: table;
  width: 80%;
  /* table-layout:fixed; */
  outline: 2px solid blue;
}

<div class="c">d</div>

如何table-layout:fixed影响父元素,在这种情况下定位？

---

作为旁注,使用像素值width会产生逻辑结果:

body {
  border: 2px solid red;
  height: 100vh;
  margin:0;
  padding: 0;
  position: absolute;
}

.c{
  display: table;
  width: 200px; 
  table-layout:fixed;
  outline: 2px solid blue;
}

<div class="c">d</div>

我们也可能会遇到一些奇怪的行为:

body {
 margin:0;
 position:relative;
 width:300px;
 border-top:20px solid green;
}

.container {
  border: 2px solid red;
  height: 100vh;
  position: absolute;
}

.c {
  display: table;
  width: 120%; 
  table-layout: fixed;
  outline: 2px solid blue;
  animation:change 2s linear infinite alternate;
}

@keyframes change {
  from{width:1%;}
  to {width:150%}
}

<div class="container">
  <div class="c">d</div>
</div>

Answer 1

看起来你不是第一个提起这件事的人.不过,你可能是第二个.

需要说明的是,这是两个问题的组合:

1. 绝对定位元件的宽度是收缩的.不知何故,收缩到适合的宽度被确定为与包含块的允许的缓冲元素一样宽.(绝对定位body的包含块是初始包含块.)

2. 包含块的元素的百分比宽度取决于其自动调整大小的内容,从而导致未定义的行为.

问题#2 非常容易注销:

实现同意不会多次计算任一元素的宽度.

即body是使用收缩以适应的尺寸,则该表被设定为宽度的80%,和的大小body是"不再次计算的".唯一的"不确定性"是规范不要求或不允许,或者确实关心实现的作用.

因此,问题归结为为什么在确定#2中表格的大小之前,缩小到适合在#1中"尽可能宽".以下是规范如何描述缩放元素的缩小:

[...]粗略地:通过格式化内容来计算首选宽度,而不会破坏除显式换行之外的行,并计算首选最小宽度,例如,通过尝试所有可能的换行符.CSS 2.1没有定义确切的算法.第三,计算可用宽度:通过在将"左"(在案例1中)或"右"(在案例3中)设置为0之后求解"宽度"来找到.

然后,收缩配合宽度为:min(最大(优选最小宽度,可用宽度),优选宽度).

但这并没有告诉我们为什么,甚至是这样,固定布局表的首选宽度"与其包含的块一样宽".css-sizing-3和css-tables-3似乎都没有包含答案.

根据David Baron(来自同一个主题),谁在Gecko工作:

固定布局表将内部最大内容内联大小报告为无限.

(请注意,"max-content inline size"表示与"首选宽度"相同的内容)

所以我们的答案就是这样.固定布局表的无界最大内容内联大小是导致该表的绝对定位父级被拉伸为与其自己的包含块(初始包含块)一样宽的原因,与自动布局表相比.

并且,至少就目前来说,这已经接近官方消息来源,因为我只是通过阅读css-sizing-3而无法得出相同的结论,而且我不确定David的声明是否基于单独Gecko的行为,所有实现的行为,或指定的行为.

Answer 2

这是我基于上述问题的解释，因此可以被视为基于“官方资源”的赏金要求的猜测。

当应用table-layout:fixed时，内容不再决定布局，而是浏览器使用表格第一行中任何定义的宽度来定义列宽度。如果第一行不存在宽度，则无论单元格内的内容如何，​​列宽都会在表格中平均分配。

为了使固定值产生任何效果，表格的宽度必须设置为除 auto（宽度属性的默认值）之外的其他值...源

一旦table-layout:fixed;应用，父容器没有任何设置宽度且其自身宽度以百分比设置，它将将其父容器（无论该容器是 body/div/etc）扩展到 100% 并采用指定的宽度（在本例中为 80%）相对于父母的。

之所以会这样做，是因为它的默认目的是设置宽度以确保其列宽度均匀分布，无论是否有列。如果它们不是任何列，它会将元素视为一列。为此，它仍然需要其宽度相对于其父级（当其自己的宽度以％设置时）。

示例table-layout:fixed未应用，因为它没有定义宽度，尽管它是在 CSS 中设置的，但table-layout:auto会按默认值应用：

body {
  border: 2px solid red;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: absolute;
}

.c {
  display: table;
  table-layout: fixed;
  /* width: 80%; */
  outline: 2px solid blue;
}

<div class="c">d</div>

现在让我们设置宽度：

body {
  border: 2px solid red;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: absolute;
}

.c {
  display: table;
  table-layout: fixed;
  width: 80%;
  outline: 2px solid blue;
}

<div class="c">d</div>