设置图像“width: 0”会隐藏它，而“width: 0%”也会让它占据空间

Question

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

width增加使用除给出相同预期结果之外的任何单位 的值（仅占据显示的部分）。%img

---

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

显示不符合预期的容器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 在他的回答中所说，我们面临着复杂的计算。使用width:0和width:0%不一样。

第一个是浏览器无需任何引用即可解析的绝对值（长度），但第二个是相对于包含块的宽度的百分比值，因此浏览器需要知道包含块的宽度首先包含块来解决它。（它不会努力得出与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-sizing

另一个涉及相同问题的相关问题：当​​子项依赖于父项，而父项依赖于子项时，浏览器如何计算宽度