我不明白auto价值。如果应用于height它会影响孩子的身高，但如果应用于width它将占据父级的宽度。
没有 MDN 帖子auto值本身，并且 Google 会产生“100% VS auto”命中，而不是“width:auto VS height:auto”命中。
对于我当前的需求，我希望一个元素扩展到其子元素的宽度，但总的来说我想知道这是怎么回事auto.
.divXS {
width: 100px;
height: 100px;
background: green;
}
.divXXS {
width: 50px;
height: 50px;
background: yellow;
}
.divSM {
width: 200px;
height: 200px;
}
#Father {
background: blue;
border: 3px solid #20295E;
}
#Mother {
background: pink;
border: 3px solid #DB6DBE;
}
#Daughter {
width: 100%;
height: 100%;
}
#Son {
width: auto;
height: auto;
}
<div class="divSM" id="Mother">
<div class="divXS" id="Daughter">
<div class="divXXS" id="grandDaughter"></div>
</div>
</div>
<div class="divSM" id="Father">
<div class="divXS" id="Son">
<div class="divXXS" id="grandSon"></div>
</div>
</div>
jsFiddle https://jsfiddle.net/azizn/90oqL2y2/ / jsBin https://jsbin.com/luyayicofo/edit?html,css,output
“auto”对于宽度属性和高度属性的行为并不总是相同。 width 属性可以有不同的行为，不仅取决于元素的显示类型，还取决于other的属性same显示类型。这就是为什么它被称为“自动”——来自我的回答here https://stackoverflow.com/questions/4471850/what-is-the-meaning-of-auto-value-in-a-css-property/4471874#4471874,
上述财产的价值已调整自动地根据元素的内容或上下文。
根据您的描述，我假设您的问题是在块布局的上下文中。块布局由一系列按正常流程垂直堆叠的块级框组成。
因此，默认情况下，块容器盒只需长到足以容纳其垂直堆叠的后代即可。由于块级盒子在正常流程中永远不会水平堆叠，因此它们没有理由不能拉伸到其包含块的整个宽度。 （它们甚至不需要缩小以适应同一块格式化上下文中的浮点数，尽管线盒在它们内部确实如此，但这完全是一个单独的主题。）
这就是为什么在块布局中，自动高度基于后代的总高度，自动宽度基于包含块的宽度。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
