为什么显示：初始未按预期工作？

Question

我隐藏了一个儿童形象，并在有人悬停父母形象时显示它。 问题是，当子图像显示时，它显示在父图像的右侧。

我希望它出现在父图像下面，因为它是默认值。没有将显示设置为＆＃34; initial＆＃34;使元素达到默认状态？

＆＃13;

＆＃13;

.child {
  display:none;
}

.parent:hover .child {
  display:initial;
}

＆＃13;

<div class="parent">
    <img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300">
  <div class="child">
    <img src="http://xiostorage.com/wp-content/uploads/2015/10/test.png" width="200">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这个问题仅供我理解CSS属性display:initial。我不需要在父图像的上方，下方，右侧或左侧显示子图像。

Answer 1

值initial表示不同的内容，具体取决于您为其指定的属性。

如果您将其分配给非继承属性，例如您的display，则其值会更改为{中为该属性定义的initial值{3}}（不到您之前在样式表中定义的值 - 这就是您获得问题中描述的行为的原因：display默认为{{1} }}，即initial）

如果您将其分配给继承的属性，例如inline，那么该属性将采用先前在样式表中定义的任何值，如果则存在任何。如果没有，则默认返回CSS规范中定义的color值。 （例如，CSS specification因浏览器而异，但它通常是initial）

相关链接：

color

initial - CSS | MDN

initial value - CSS | MDN

display - CSS | MDN

Answer 2

initial值只表示整个属性的值。它依赖于财产而不是其他任何东西。

作为示例： display: initial;表示内联，这是因为它是指定的属性初始值。

在大多数情况下，浏览器的默认值为block，因为该元素是div。

不确定这是否有利于您的理解，但是你去了。

Answer 3

因此，initial实际上是某个元素的默认状态。

div或p等特定元素默认为display: block。因此将其设置为display: initial将是相同的。

img - 标记默认为display: inline。因此将其设置为display: initial与将其设置为inline相同。