为什么宽度:汽车的行为与高度:汽车？
为什么宽度:汽车的行为与高度:汽车？
提问于 2016-05-01 16:45:23
我没有得到auto值。如果应用于height，它将承担子级的高度，但如果应用于width，则将接受父级的宽度。
在auto值本身上没有MDN帖子，谷歌提供"100% VS自动“点击，而不是”宽度:自动与高度:自动“点击。
对于我目前的需求，我想要一个元素来扩展到它的子元素的宽度，但是总的来说，我想知道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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-05-01 16:57:58
对于宽度属性和高度属性，“‘auto”的行为方式并不总是相同。它可以对宽度属性有不同的行为，不仅取决于元素的显示类型，还取决于同一显示类型的其他属性值。所以才叫“汽车”--根据我的回答，这里，
根据元素的内容或上下文自动调整属性的值。
根据您的描述，我假设您的问题是在块布局的上下文中。块布局由一系列垂直堆叠在正常流中的块级盒组成.
因此，在默认情况下，块容器盒只需长得足够高，就可以容纳垂直堆叠的后代。而且，由于块级框从不在正常流中水平堆叠，因此它们没有理由不能伸展到其包含的块的全部宽度。(它们甚至不需要收缩以适应相同块格式上下文中的浮动，尽管其中的行框可以，但这是一个完全不同的主题。)
这就是为什么，在块布局中，汽车高度是基于后代的总高度，而汽车宽度是基于包含的块宽度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36969175
复制相关文章
相似问题
腾讯云开发者
