CSS 属性中“auto”值的含义是什么。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4471850/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the meaning of `auto` value in a CSS property.
提问by sushil bharwani
What is the meaning of autovalue of a CSS property. What happens when value of a CSS property is set to auto?
autoCSS 属性值的含义是什么。当 CSS 属性的值设置为 时会发生什么auto？
回答by BoltClock
The value of said property is adjusted automaticallyaccording to the content or the context of the element.
所述属性的值根据元素的内容或上下文自动调整。
For example, a block-level element with height: autowill grow taller as it contains more text. For another example, a block element with margin: 0 autowill have the left and right margins increased until it becomes centered along the y-axis of the viewport.
例如，一个块级元素height: auto会随着它包含更多文本而变得更高。再举一个例子，一个块元素的margin: 0 auto左右边距将增加，直到它沿视口的 y 轴居中。
It really depends on the property you give the value to, different properties behave differently depending on the content and context.
这实际上取决于您赋予值的属性，不同的属性根据内容和上下文表现不同。
回答by sushil bharwani
auto means automatically adjected. The most common reason I use auto is:
auto 表示自动形容词。我使用 auto 的最常见原因是：
margin: 0 auto;
to center an element.
使元素居中。
Please note: if size is not declared, then it won't work.
请注意：如果未声明大小，则它将不起作用。
Example 1: div is not centered, auto does not work
示例1：div不居中，auto不起作用
<style>
.cont {
margin: 0 auto;
}
</style>
<div class="cont"></div>
Example 2: div is centered to the page
示例2：div以页面为中心
<style>
.cont {
width: 1000px;
margin: 0 auto;
}
</style>
<div class="cont"></div>
回答by Upton Yu
It really depnds on that attribute you use.For example,a block width set auto will expand full space of his parent element.But a block height set auto will only expand needed space of his content.
它确实取决于您使用的那个属性。例如，设置为 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>
