Question

CSS属性的auto值的含义是什么？当CSS属性的值设置为auto时会发生什么？

Answer 1

根据元素的内容或上下文，自动调整所述属性的值。

例如，具有height: auto的块级元素将随着包含更多文本而变得更高。再举一个例子，margin: 0 auto的块元素将左右边距增加，直到它沿着视口的y轴居中。

这实际上取决于您赋予值的属性，不同的属性根据内容和上下文的不同而有所不同。

Answer 2

自动意味着自动投放。我使用auto的最常见原因是：

margin: 0 auto;

以元素为中心。

请注意：如果未声明尺寸，则无法使用。

示例1：div不居中，自动无效

<style>
    .cont {
        margin: 0 auto;
    }
</style>
<div class="cont"></div>

示例2：div以页面为中心

<style>
    .cont {
        width: 1000px;
        margin: 0 auto;
    }
</style>
<div class="cont"></div>

Answer 3

它确实依赖于您使用的属性。例如，块宽度设置为auto将扩展其父元素的整个空间。但块高度设置为auto将仅扩展其内容所需的空间。

long time = 24 hours in milliseconds;
message.setLongProperty(ScheduledMessage.AMQ_SCHEDULED_DELAY, time);
producer.send(message)

Answer 4

这取决于。以下是 auto 值的一些常见用法。

高度：自动

元素高度取决于其子元素的高度。

.container {
  width: 250px;
  height: auto;
  background: gray;
}

.item {
  width: 50px;
  background: orange;
}

<div class="container">
  <div class="item">
    child content
  </div>
</div>

宽度：自动

对于块级元素，宽度是容器宽度减去元素的水平间距（边距+边框+填充）。

.container {
  width: 250px;
  height: 150px;
  background: gray;
}

.item {
  width: auto;
  margin: 0 10px;
  border-left: 5px solid;
  border-right: 5px solid;
  padding: 0 10px;
  background: orange;
  font-size: 14px;
}

<div class="container">
  <div class="item">
    calculated content width is 200px
  </div>
</div>

请注意，当容器是 flex 和 align 时，行为是不同的。

.container {
  width: 250px;
  height: 150px;
  display: flex;
  flex-direction: column;
  background: gray;
}

.item {
  width: auto;
  background: orange;
  /* comment out next line to make width take parent's width */
  align-self: start;
}

<div class="container">
  <div class="item">
    child
  </div>
</div>

保证金：自动

水平居中块级元素。

.container {
  width: 250px;
  height: 150px;
  background: gray;
}

.item {
  width: 32px;
  margin: 0 auto;
  background: orange;
}

<div class="container">
  <div class="item">
    child
  </div>
</div>

将一个元素推到 flex 容器内的末尾。

.container {
  width: 300px;
  height: 150px;
  display: flex;
  background: gray;
}

.item {
  width: 50px;
  height: 25px;
  background: orange;
  border-left: 1px solid;
}

.item3 {
  margin-left: auto;
}

<div class="container">
  <div class="item">
    child 1
  </div>
  <div class="item">
    child 2
  </div>
  <div class="item item3">
    child 3
  </div>
</div>

CSS属性中`auto`值的含义是什么？

4 个答案:

高度：自动

宽度：自动

保证金：自动