CSS属性中的`auto`值是什么意思。

78

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

css

— Sushil Bharwani
source

4

autoCSS中的行为取决于您要分配的属性。如果您想要更具体的答案，则必须提供一个示例，说明您对哪个属性感兴趣。

— cdhowie 2010年

87

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

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

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

— BoltClock
source

7

@MarceloBarbosa：不，即使在接受两个值都为auto的属性中，也不一定总是100％。例如，如果宽度为100％，则强制内联块元素为其容器宽度的100％，即使同一行上还有其他元素（这些元素也会被推送到下一行）。自动宽度会导致内联块缩小以适合其内容，这当然不是100％。

— BoltClock

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

— Alston

'auto'是所有默认值吗？每个属性都可以具有“自动”值吗？

— robsch

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

— BoltClock

12

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>

— 拉德比克斯
source

2

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

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

— 于
source