[高度自动使元素消失

Posted 2023-01-13

当高度设置为auto时，我的CSS下方具有div，div消失（类一的div）。

[将高度设置为以px为单位的某个值时，则它的可见性（第二类的div）。

.one 
  display: block;
  height: auto;
  width: 100px;
  background-color: rgb(67, 132, 245);
  position: fixed;
  border: 1px solid #000;
  right: 20px;
  bottom: 20px;
  background-image: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
  background-size: 40px;
  background-position: center;


.two 
  display: block;
  height: 100px;
  width: 100px;
  border: 1px solid #000;
  background-color: rgb(67, 132, 245);
  position: fixed;
  left: 20px;
  bottom: 20px;
  background-image: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
  background-size: 40px;
  background-position: center;

<div class="one">

</div>

<div class="two">

</div>

答案

默认情况下，div元素的高度为0px，宽度为100%。仅当div具有内容（例如文本或其他具有固定高度的元素）时，其默认高度才会增加。请注意，此处background-image不算作内容，因为它只是CSS样式。

在您的示例中，div.one的高度为0px，因为height: auto应用默认值。这就是为什么它看起来不可见的原因。

div.two的高度为100px，因为这是您为其指定的高度。因此它是可见的。

您可能会感到困惑的是，img元素通常会自动调整为图像中尺寸的事实。但是，当background-image指向div时，这不适用。