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

I don't get the auto value. If applied to height it will take on the child's height, but if applied to width it will take on the parent's width.

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

There are no MDN posts on the auto value itself, and Google yields "100% VS auto" hits rather than "width:auto VS height:auto" hits.

自动值本身没有MDN帖子，谷歌产生“100％VS自动”命中而不是“宽度：自动VS高度：自动”命中。

For my current needs I would like an element to expand to its child's width, but in general I wish to know what is the deal with auto.

对于我目前的需求，我想要一个元素扩展到它的孩子的宽度，但总的来说我想知道什么是与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

1 个解决方案

#1

'auto' doesn't even always behave the same way for the width property and the height property respectively. It can have different behaviors for the width property not only depending on the element's display type, but also depending on the value of other properties for the same display type. That's why it's called 'auto' — from my answer here,

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

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

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

Based on your description I'm assuming your question is in the context of block layout. Block layout consists of a series of block-level boxes stacked vertically in normal flow.

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

So a block container box, by default, only has to grow tall enough to contain its descendants stacked vertically. And since block-level boxes never stack horizontally in normal flow, there's no reason they can't stretch to the full width of their containing block. (They don't even need to shrink to accommodate floats in the same block formatting context, though the line boxes inside them do, but that's a separate topic altogether.)

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

And that's why, in block layout, an auto height is based on the total height of descendants and an auto width is based on the containing block width.

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

#1