为什么width:auto的行为与height:auto的行为不同? [英] Why does width:auto behave differently than height:auto?

问题描述

我没有得到 auto 值.如果应用于 height ，它将采用孩子的身高，但是如果应用于 width ，它将采用父母的身高.

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.

auto 值本身没有MDN帖子，并且Google会生成"100％VS auto"匹配，而不是"width:auto VS height:auto"匹配.

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.

对于我当前的需求，我希望一个元素扩展到其孩子的宽度，但总的来说，我希望知道对 auto 的处理方式.

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.

 .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 /推荐答案

'auto'的宽度属性和高度属性的行为也不总是相同的.它的width属性可能具有不同的行为，不仅取决于元素的显示类型，而且取决于 same 显示类型的 other 属性的值.这就是为什么它被称为自动"的原因-从我的回答

'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,

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

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

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.

因此，默认情况下，一个块状容器框仅需增长到足以容纳其后代垂直堆叠的高度即可.而且由于块级盒子永远不会在正常流动中水平堆叠，因此没有理由它们不能伸展到其包含块的整个宽度.(尽管它们内部的 line box 确实可以，但它们甚至不需要收缩以在相同的块格式上下文中容纳浮点数，但这完全是一个单独的主题.)

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.

这篇关于为什么width:auto的行为与height:auto的行为不同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！