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

2019年7月21日 253次阅读

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

自动值本身没有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;
 }
<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/jsBin

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

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

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

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

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

点赞