Was bedeutet der Wert "auto" in einer CSS-Eigenschaft?

78

Was bedeutet der autoWert einer CSS-Eigenschaft ? Was passiert, wenn der Wert einer CSS-Eigenschaft auf gesetzt ist auto?

css Sushil Bharwani
quelle
4
Das Verhalten autoin CSS hängt von dem Attribut ab, das Sie zuweisen. Sie müssen ein Beispiel für das Attribut angeben, an dem Sie interessiert sind, wenn Sie eine genauere Antwort wünschen.
CDhowie

Antworten:

88

Der Wert dieser Eigenschaft wird automatisch entsprechend dem Inhalt oder dem Kontext des Elements angepasst .

Beispielsweise wird ein Element auf Blockebene mit height: autogrößer, wenn es mehr Text enthält. In einem anderen Beispiel werden bei einem Blockelement mit margin: 0 autodem linken und rechten Rand vergrößert, bis es entlang der y-Achse des Ansichtsfensters zentriert wird.

Es hängt wirklich von der Eigenschaft ab, der Sie den Wert geben. Unterschiedliche Eigenschaften verhalten sich je nach Inhalt und Kontext unterschiedlich.

BoltClock
quelle
7
@MarceloBarbosa: Nein, selbst in Eigenschaften, die beide Werte akzeptieren, bedeutet auto nicht immer 100%. Eine Breite von 100% erzwingt beispielsweise, dass ein Inline-Block-Element 100% seiner Container-Breite beträgt, selbst wenn sich andere Elemente in derselben Zeile befinden (diese Elemente werden stattdessen in die nächste Zeile verschoben). Eine automatische Breite führt dazu, dass ein Inline-Block verkleinert wird, um seinem Inhalt zu entsprechen, was sicherlich nicht 100% ist.
BoltClock
Wie kann ich die Elemente auf Blockebene erzwingen, die 100% in einer Zeile enthalten?
Alston
Ist 'auto' der Standardwert für alle? Kann jede Eigenschaft den Wert 'auto' haben?
Robsch
@robsch: Nein, ob eine Eigenschaft auto als möglichen Wert hat oder nicht, geschweige denn den Anfangswert, hängt vollständig von der Eigenschaft ab. Für die meisten Eigenschaften macht eine automatische Wertabstimmung keinen Sinn.
BoltClock
13

auto bedeutet automatisch angepasst. Der häufigste Grund, warum ich auto benutze, ist:

margin: 0 auto;

ein Element zentrieren.

Bitte beachten Sie: Wenn die Größe nicht deklariert ist, funktioniert sie nicht.

Beispiel 1: div ist nicht zentriert, auto funktioniert nicht

<style>
    .cont {
        margin: 0 auto;
    }
</style>
<div class="cont"></div>

Beispiel 2: div ist auf der Seite zentriert

<style>
    .cont {
        width: 1000px;
        margin: 0 auto;
    }
</style>
<div class="cont"></div>
Radbyx
quelle
2

Es hängt wirklich von dem Attribut ab, das Sie verwenden. Beispielsweise erweitert ein Blockbreiten-Set-Auto den gesamten Speicherplatz seines übergeordneten Elements. Ein Blockhöhen-Set-Auto erweitert jedoch nur den benötigten Speicherplatz seines Inhalts.

<style>
    #outer{
        width: 500px;
        height: 500px;
        border: solid 2px black;
    }
    #inner{
        width: auto;
        height: auto;
        background-color: aqua;
    }
</style>
<div id="outer">
<div id="inner">content</div>
</div>
Upton Yu
quelle