Question

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

使用除以外的任何单位width来提高%的值，得出的结果与预期结果相同（img仅占显示其中的一部分）。

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

容器display的类型，其中img的显示与预期不符：

-webkit-inline-box
inline-block
inline-flex
在线网格
内联表
表
表格单元格
表行
表行组
表头组
table-footer-group

不确定它们之间的关系，可能是我缺少了一些东西。

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://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">
      <p>Add playlist</p>
</button>


<h3>The image width: 0% (occupies the space (natural img width) and hides it)</h3>

<button>
      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">
      <p>Add playlist</p>
</button>

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

Answer 1

容器的宽度由img宽度确定，它是容器的宽度的百分比，该宽度由img宽度确定，...（圆形参考）。

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

尽管看起来0％的特殊情况似乎可以视为0px，但可能与其他指定百分比值的行为不一致。

Answer 2

正如@Talmid在他的回答中所说，我们面临着一个复杂的计算，并且使用width:0和width:0%并不相同。

第一个是浏览器无需任何引用即可解析的绝对值（长度），但是第二个是相对于包含块宽度的百分比值，因此浏览器需要了解首先解决包含块的宽度。 （不会得出0%与0相同的结论）

此问题将在我们具有缩小适应行为（浮动，内联代码等）的所有元素中发生

还有更多示例：

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

<span>
      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">
</span>

<span style="float:left;">
      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">
</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>

基本上，浏览器将首先定义包含块的尺寸（在此步骤中，我们不考虑在子元素的width属性上定义的百分比值）。从逻辑上讲，包含块的尺寸将由其内容（“缩小以适合行为”）定义。之后，我们能够根据先前计算的宽度来解析百分比值，因此子元素将缩小。

当然，我们将不会再计算包含块的宽度，因为我们将有一个无休止的循环（一个循环）。

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

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>

设置图片“宽度：0”会隐藏它，而“宽度：0％”也会使它占据空间

2 个答案: