Question

我没有获得rolling_mean值。如果应用于auto，则会占用孩子的身高，但如果应用于height则会占用孩子的身高。

width值本身没有MDN帖子，谷歌收益率为＆＃34; 100％VS auto＆＃34;命中而不是＆＃34;宽度：自动VS高度：自动＆＃34;命中。

根据我目前的需求，我希望将一个元素扩展到其子宽度，但一般来说我想知道auto的处理方式。

＆＃13;

auto

＆＃13;

 .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;
 }

＆＃13;

jsFiddle / jsBin

Answer 1

对于width属性和height属性，

'auto'的行为总是相同。它对width属性可以有不同的行为，不仅取决于元素的显示类型，还取决于相同显示类型的其他属性的值。这就是为什么它被称为'自动' - 来自我的回答here，

根据元素的内容或上下文，自动调整所述属性的值。

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

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

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

为什么width：auto的行为与height：auto不同？

1 个答案: