设置图像"width:0"会隐藏它，而"width%0%"也会占用空间

Question

使用img { width: 0; }或img { width: 0%; }样式规则时，具有特定display类型的容器元素内的图像的行为不同。

使用除%之外的任何单元来增加width的值，会得到相同的预期结果(img仅占据其显示的部分)。

---

我尝试更改img所在容器的display类型。结果如下所示。

容器display类型，其中img显示为而非预期：

1. -webkit内联框
2. 内联块
3. 内联柔性
4. 内联网格
5. 内联表
6. 表
7. 表格单元格
8. 表格行
9. 表格行组
10. 表头组
11. 表页脚组

不确定它们之间的关系，可能我错过了什么。

---

button:first-of-type img {
width: 0;
}
button:last-of-type img {
width: 0%;
}

<h3>The image width: 0 (hides it)</h3>
<button>
<img src="https://picsum.photos/id/1012/200/100">
<p>Add playlist</p>
</button>

<h3>The image width: 0% (occupies the space (natural img width) and hides it)</h3>
<button>
<img src="https://picsum.photos/id/1012/200/100">
<p>Add playlist</p>
</button>

---

img { width: 0%; }应该像img { width: 0; }一样工作，而不会占用任何空间，但这里的情况并非如此。

Answer 1

正如@Talmid在回答中所说，我们面临着复杂的计算。使用CCD_ 13和CCD_。

第一个是浏览器可以在不需要任何引用的情况下解析的绝对值(长度)，但第二个是相对于包含块宽度的百分比值，因此浏览器需要首先知道包含块的宽度才能解析。(它不会努力得出0%与0相同的结论)

这个问题将发生在我们有收缩以适应行为的所有元素(浮点、内联块等)中

以下是更多示例：

img {
width: 30%;
}
span {
border: 1px solid;
display: inline-block;
}

<span>
<img src="https://picsum.photos/id/1012/200/100">
</span>
<span style="float:left;">
<img src="https://picsum.photos/id/1012/200/100">
</span>

非图像元素也可能发生这种情况：

span  {
display:inline-block;
border:1px solid red;
}

<div style="float:left;border: 1px solid;">
<span >some text</span>
</div>
<div style="float:left;border: 1px solid;clear:left;">
<span style="width:30%;">some text</span>
</div>
<div style="float:left;border: 1px solid;clear:left;">
<span style="width:0%;">some text</span>
</div>

基本上，浏览器将首先定义包含块的尺寸(在这一步中，我们不考虑在子元素的宽度属性上定义的百分比值)。从逻辑上讲，包含块的尺寸将由其内容定义(收缩以适应行为)。之后，我们能够基于之前计算的宽度来解析百分比值，因此子元素将收缩。

当然，我们不会再回来计算包含块的宽度，因为我们将有一个非结束循环(循环)。

如果子元素使用非百分比值(长度)，浏览器在定义包含块的宽度时会首先考虑它，因为它不是相对值，而是绝对值：

span  {
display:inline-block;
border:1px solid red;
}

<div style="float:left;border: 1px solid;">
<span >some text</span>
</div>
<div style="float:left;border: 1px solid;clear:left;">
<span style="width:30px;">some text</span>
</div>
<div style="float:left;border: 1px solid;clear:left;">
<span style="width:0;">some text</span>
</div>

以下是规范的相关部分，详细说明了这一点：https://www.w3.org/TR/css-sizing-3/#percentage-尺寸

另一个相关的问题是：当子项依赖于父项时，浏览器如何计算宽度，而父项'；s取决于child'；s

Answer 2

容器的宽度由img宽度决定，img宽度是容器宽度的百分比，由img宽度确定，img宽度。。。(循环参考)。

当指定img的百分比宽度时，浏览器只需将容器宽度设置为图像的预缩放宽度即可解决此问题。

虽然，0%的特殊情况似乎可以像0px一样处理，但也许这与其他指定百分比值的行为不一致。