Warum verhält sich width: auto anders als height: auto?

Ich bekomme den Wert auto nicht. Wenn es auf height angewendet wird, nimmt es die Höhe des Kindes an, aber wenn es auf width angewendet wird, nimmt es die Breite des Elternteils an.Warum verhält sich width: auto anders als height: auto?

Es gibt keine MDN-Posts auf dem Wert auto selbst, und Google liefert "100% VS auto" Treffer statt "Breite: auto VS Höhe: Auto" Treffer.

Für meine aktuellen Bedürfnisse würde ich gerne ein Element auf seine Kinderbreite erweitern, aber im Allgemeinen möchte ich wissen, was ist der Deal mit .

.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

Quelle

2016-05-01 Bar Akiva

"Es gibt keine MDN-Posts auf der Auto-Eigenschaft selbst" Das liegt daran, dass Auto keine Eigenschaft ist, es ein Wert ist und kein CSS-weites Schlüsselwort wie initial oder inherit ist und sich für verschiedene Eigenschaften anders verhält - [ aus einem bestimmten Grund] (http://stackoverflow.com/questions/4471850/what-is-the-meaning-of-auto-value-in-a-css-property/4471874#4471874). – BoltClock

* "Ich möchte, dass ein Element auf die Breite seines Kindes erweitert wird" * Sie können das tun, indem Sie das Elternelement als einen 'Inline-Block' definieren und es dann an seine Kinder anpassen. – Aziz

'auto' immer noch nicht einmal die gleiche Art und Weise für die Breite Eigenschaft verhalten und die Höhe Eigentum ist. Es kann unterschiedliche Verhalten für die Eigenschaft width nicht nur abhängig vom Anzeigetyp des Elements haben, sondern auch abhängig vom Wert andere Eigenschaften für die gleiche Display-Typ. Das ist, warum es ‚auto‘ genannt - aus meiner Antwort here,

Der Wert der Eigenschaft wird automatisch angepasst nach dem Inhalt oder Kontext des Elements.

Basierend auf Ihrer Beschreibung gehe ich davon aus, dass Ihre Frage im Kontext des Blocklayouts steht. Das Blocklayout besteht aus einer Reihe von Kästchen auf Blockebene, die im normalen Fluss vertikal gestapelt sind.

So eine Blockcontainerbox muss standardmäßig nur groß genug wachsen, um ihre vertikal gestapelten Nachkommen aufzunehmen. Und da Block-Level-Boxen im normalen Fluss niemals horizontal gestapelt werden, gibt es keinen Grund, dass sie sich nicht auf die volle Breite ihres umgebenden Blocks ausdehnen können. (Sie brauchen nicht einmal zu schrumpfen Schwimmern im selben Block-Formatierungskontext gerecht zu werden, obwohl die Linie Box in sie zu tun, aber das ist ein anderes Thema ganz.)

Und deshalb in Blocklayout einer Die automatische Höhe basiert auf der Gesamthöhe der Nachkommen und die automatische Breite basiert auf der Breite des umgebenden Blocks.

Quelle

2016-05-01 16:57:58 BoltClock

Warum verhält sich width: auto anders als height: auto?

Antwort

Verwandte Themen