所述属性的值根据元素的内容或上下文被自动调整。
例如，一个包含height: auto的块级元素会随着文本的增加而变高，另一个例子是，一个包含margin: 0 auto的块级元素会增加左右边距，直到它沿着视口的y轴居中。
这实际上取决于您给予值的属性，不同属性的行为取决于内容和上下文。

auto的意思是自动调整。2我使用auto最常见的原因是：

margin: 0 auto;

以使图元居中。
请注意：如果没有声明size，那么它就不能工作。
示例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>

这要看情况了。下面是auto值的一些常见用法。

高度：自动

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

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

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

<div class="container">
  <div class="item">
    child content
  </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>

将元件推到柔性容器内的末端。

.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>

这实际上取决于你使用的属性，例如，块宽度设置为auto将扩展其父元素的全部空间，但是块高度设置为auto将只扩展其内容所需的空间。

<style>
    #outer{
        width: 500px;
        height: 500px;
        border: solid 2px black;
    }
    #inner{
        width: auto;
        height: auto;
        background-color: aqua;
    }
</style>
<div id="outer">
<div id="inner">content</div>
</div>