CSS属性中的“auto”值是啥意思。

Posted 2023-03-05

【中文标题】CSS属性中的“auto”值是啥意思。

【英文标题】：What is the meaning of `auto` value in a CSS property.CSS属性中的“auto”值是什么意思。

【发布时间】：2011-05-27 04:34:03

【问题描述】：

CSS 属性的auto 值是什么意思。当 CSS 属性的值设置为 auto 时会发生什么？

【问题讨论】：

auto 在 CSS 中的行为取决于您分配给的属性。如果您想要更具体的答案，您必须提供一个您感兴趣的属性的示例。

【参考方案1】：

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

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

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

【讨论】：

@MarceloBarbosa：不，即使在同时接受两个值的属性中，auto 也并不总是意味着 100%。例如，100% 的宽度会强制 inline-block 元素为其容器宽度的 100%，即使同一行上有其他元素（这些元素被推到下一行）。自动宽度会导致内联块缩小以适应其内容，这当然不是 100%。

如何强制在一行中给出 100% 的块级元素？

'auto' 是所有的默认值吗？每个属性都可以有值'auto'吗？

@robsch：不，属性是否具有 auto 作为可能值，更不用说初始值，完全取决于属性。对于大多数属性，自动值完全没有意义。

【参考方案2】：

auto 表示自动调整。我使用 auto 的最常见原因是：

margin: 0 auto;

使元素居中。

请注意：如果未声明大小，则它将不起作用。

示例 1：div 不居中，auto 不起作用

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

---

示例 2：div 以页面为中心

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

【参考方案3】：

这确实取决于您使用的属性。例如，自动设置块宽会扩展其父元素的全部空间。但是自动设置块高只会扩展其内容所需的空间。

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

【参考方案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>

请注意，当容器使用 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>