我没有得到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>
发布于 2016-05-01 08:57:58
对于宽度属性和高度属性,“‘auto”的行为方式并不总是相同。它可以对宽度属性有不同的行为,不仅取决于元素的显示类型,还取决于同一显示类型的其他属性值。所以才叫“汽车”--根据我的回答,这里,
根据元素的内容或上下文自动调整属性的值。
根据您的描述,我假设您的问题是在块布局的上下文中。块布局由一系列垂直堆叠在正常流中的块级盒组成.
因此,在默认情况下,块容器盒只需长得足够高,就可以容纳垂直堆叠的后代。而且,由于块级框从不在正常流中水平堆叠,因此它们没有理由不能伸展到其包含的块的全部宽度。(它们甚至不需要收缩以适应相同块格式上下文中的浮动,尽管其中的行框可以,但这是一个完全不同的主题。)
这就是为什么,在块布局中,汽车高度是基于后代的总高度,而汽车宽度是基于包含的块宽度。
https://stackoverflow.com/questions/36969175
复制