有人可以解释为什么我的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;
}
d
如上所示，添加table-layout:fixed会强制主体为全宽，并且div上的百分比width将相对于body的width起作用！
以下代码段不是这种情况，该行为在某种程度上是合理且直观的：
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;
}
d
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;
}
d
我们也可能因这种奇怪的行为而产生一些溢出：
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%}
}
d
似乎可能与位置有关：绝对的，如果删除该位置，则它确实会遵循主体的宽度。
@RyanGibbs绝对删除位置将使该元素流入，并且默认情况下其为块元素，因此它具有width：100％，并且table-layout在这种情况下将不起作用
@TemaniAfif如果标题没有描述问题，则OP需要更改标题和正文，因为我编写的标题与正文本身中的问题说明具有相同的含义。至少，对标题的任何更改都应确保使用文章和适当的语法：-)
@TylerH，但看看磁贴和第一行...您使标题说"为什么它不遵守我的百分比宽度"，这是相反的，因为这是正在发生的事情...而第一行则说"为什么固定的表格布局不符合主体的宽度"，因此与百分比无关，但与父代的宽度无关
@TemaniAfif好吧，在那种情况下...很容易解决:-)无需回滚到零碎的标题，重复单词
@TylerH我又做了一次更改，但仍然与我无关：) ..主体是一个简单的容器，我使它更加通用和精确
@TemaniAfif泛型和精确是反义词，btw :-P
@TylerH我和英语也是正语：p
看来您不是第一个提出此建议的人。不过，您可能是第二位。
要明确的是，这是两个问题的组合：
绝对定位的元素的宽度可缩小以配合。确定以某种方式将"收缩至配合"宽度定为所吸收元素的容纳块所允许的宽度。 (绝对定位的body的包含块是初始包含块。)
如果元素的包含块取决于其内容以自动调整大小，则该元素上的百分比宽度会导致未定义的行为。
问题2很容易注销：
implementations agree not to calculate the width of either element more than once.
即body的大小使用"缩小至适合"大小，然后将表格设置为该宽度的80％，并且body的大小"不再计算"。唯一的"不确定性"是规范不需要或不允许，或者实际上不在乎实现要做什么。
因此，问题就归结为：为什么在确定＃2中表的大小之前，先缩小后才能在＃1中产生"尽可能宽"的结果。这是规范如何描述收缩以适合裸元素的方法：
[...] Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, calculate the available width: this is found by solving for 'width' after setting 'left' (in case 1) or 'right' (in case 3) to 0.
Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
但这并不能告诉我们为什么甚至固定表的首选宽度是"其包含块所允许的宽度"。 css-sizing-3或css-tables-3均未包含答案。
根据Gecko的David Baron(来自同一线程)的说法：
Fixed-layout tables report an intrinsic max-content inline size as infinite.
(请注意，"最大内容在线尺寸"与"首选宽度"含义相同)
所以有我们的答案。固定布局表的无限制最大内容内联大小是导致此表的绝对定位父级被拉伸到其自身包含块(初始包含块)所允许的宽度的原因，这与自动布局表相反。
而且，至少就目前而言，这已经接近我的官方消息了，因为仅阅读css-sizing-3很难得出相同的结论，而且我不确定David的陈述是否基于壁虎的行为本身，所有实现的行为或特定行为。
它有点清晰，但我需要再次阅读3或4次才能得到所有内容：p ...而且我同意无限大小是某种意义上的答案，因为如果我们尝试使用内联块，则会得到类似的结果：jsfiddle。 net / 5ayuznrf / 1 ...因此，我认为我们可以省略与绝对位置有关的部分。因此，它结合了无限的东西和宽度计算的周期。
@Temani Afif：也会漂浮。关键是缩小到适合的大小(又称适合内容)，它适用于所有这三个:)
同样，此引用实现也同意不重复计算任何一个元素的宽度。之所以令人着迷，是因为我多次面对这种行为，而现在我已经知道了答案。这是flexbox的一个示例：stackoverflow.com/questions/51445959/ ...并确保高度也一样，因此浏览器永远不会返回重新计算即使它对我们来说微不足道
这是我基于上述问题的解释，因此可以将其视为基于"官方资源"的赏金要求的推测。
When table-layout: fixed is applied, the content no longer dictates the layout, but instead, the browser uses any defined widths from the table's first row to define column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells.
In order for a value of fixed to have any effect, the table's width has to be set to something other than auto (the default for the width property) ... source
一旦应用了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;
}
d
现在设置宽度：
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;
}
d
不好意思说，但这有点不对劲...您的第一个引号不会起作用，因为我们没有行也没有列，我们只是有一个带display：table的div。而且您说的是，显示表是主容器，而不是它的主体，因此table-layout：fixed影响了父元素……当然，如果我们删除绝对位置，它将是无关紧要的，因为主体是块流入元素，默认情况下，块元素的宽度等于100％。抱歉，但是我在这里看不到任何合乎逻辑的解释(我不知道您是如何获得投票的)。
良好的反馈。我根据对发生原因的理解更新了答案。
抱歉，这没有任何改变，您只是说出此Once table-layout:fixed; is applied without the parent container having any set width and its own width set in percents来描述我们所看到的行为。您对此没有任何证明...也可以说It would do this since its default purpose is with width being set to make sure its columns width is distributed evenly.不符合逻辑->我们在这里没有定义任何列，只有display：table ...再一次，第一个引号说明了表算法，没有任何内容使用任何父元素。
正如我所说的，这是我对它为什么发生的理解。就像您一样，我也没有具体的证据，否则这根本不是问题。乐于犯错，并了解为什么它不是我所建议的。
是的，但是赏金明确表明我们需要从官方资源中获取答案。您可以自由地发布答案，但需要明确表明它是您的意见，因为实际上您选择了该规范的一部分，并且您正在基于该规范进行描述，这可能会导致认为这是官方的事情，但并非如此。这只是您的解释。
更新了我的答案。
@Temani Afif：div包含一个包含其文本内容的单个匿名单元格。话虽这么说，但是删除文本内容不会发生任何变化，因为第一行的匿名单元格始终具有自动宽度。
@BoltClock好的，但是在这种情况下，我仍然看不到这如何影响父元素的宽度为100％....
顺便说一句，此答案中的引文来自CSS-Tricks文章的两个单独的段落。将短语"官方资源[原文如此]"并列使用可能会使读者误解该报价是来自官方的资料，而并非来自官方。
@Akrion您的报价来自哪里？
@TylerH添加了源
在第二个示例中
body {
border : 2px solid red;
height : 100vh;
margin : 0;
padding : 0;
position : absolute;
}
.c {
display : table;
width : 80%;
outline : 2px solid blue;
/* table-layout : fixed; */
}
您已经完全确定了主体的位置，因此它不会出现正常流动，并且不会影响其.c子项的位置或大小。
因此，.c的宽度不是您最初预期的80％。
但是，您可以使用像素或vw等单位来设置.c的宽度，这样结果将更加直观。
.c {
display : table;
width : 80vw;
outline : 2px solid blue;
/* width : 80%; */
/* table-layout : fixed; */
}
同样，当您使用table-layout:fixed;时，浏览器使用一种算法来计算表格的宽度，这类似于使用像素或vw等单位来计算表格的宽度。
引用W3C规范
17.5.2.1 Fixed table layout With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells ...
抱歉，但是第一部分是错误的..已定位元素已从流中取出，不会影响任何同位元素或其父元素，但仍会影响子元素并受其影响，并且80％是身体的80％ (使用固定值进行测试)..我很清楚这个问题，使用诸如pixel或vw之类的单位工作正常，问题仅在于％，因此问题的最后一部分增加了注意事项
2116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
