html height auto为什么会适应小的高度,html – 为什么width：auto的行为与height：auto不同？...

我没有得到自动值.如果应用于高度,它将占用孩子的身高,但如果应用于宽度,则将采用父母的宽度.

自动值本身没有MDN帖子,谷歌产生“100％VS自动”命中而不是“宽度：自动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;

}

最佳答案 对于width属性和height属性,’auto’的行为总是分别相同.它对width属性可以有不同的行为,不仅取决于元素的显示类型,还取决于相同显示类型的其他属性的值.这就是为什么它被称为’汽车’ – 从我的回答

here,The value of said property is adjusted automatically according to the content or the context of the element.

根据您的描述,我假设您的问题是在块布局的上下文中.块布局由一系列在正常流中垂直堆叠的块级盒组成.

因此,默认情况下,块容器盒只需要增长到足以包含其垂直堆叠的后代.而且由于块级盒子从不在正常流动中水平堆叠,所以没有理由它们不能伸展到它们包含块的整个宽度. (它们甚至不需要缩小以适应同一块格式化上下文中的浮点数,尽管它们内部的行框也可以,但这完全是一个单独的主题.)

这就是为什么在块布局中,自动高度基于后代的总高度,自动宽度基于包含块宽度.