Warum wird eine Schaltfläche nicht erweitert, um ihren Container mit „display: block“ und „width: auto“ zu füllen?

Warum erweitern „display: block“ und „width: auto“ eine Schaltfläche nicht, um den Container zu füllen?

In HTML Bestimmte Elemente wie Schaltflächen, Eingaben, Auswahlmöglichkeiten und Bilder werden als „ersetzte Elemente“ bezeichnet. Diese Elemente haben inhärente Abmessungen und Erscheinungsbilder, die von externen Ressourcen wie dem Betriebssystem oder Plugins bestimmt werden.

Wenn Sie „display:block“ auf eine Schaltfläche anwenden, bedeutet dies, dass sich die Schaltfläche wie ein Element auf Blockebene verhalten soll und nehmen die gesamte Breite seines Containers ein. Allerdings gibt „width: auto“ an, dass die intrinsische Breite der Schaltfläche verwendet werden soll.

Ersetzte Elemente verfügen über intrinsische Abmessungen, d. h. ihre Breite und Höhe sind fest und können nicht per CSS geändert werden. Die eigentlichen Abmessungen eines Bildelements werden beispielsweise durch die Größe der Bilddatei bestimmt. Wenn „width: auto“ auf ein ersetztes Element angewendet wird, respektiert der Browser seine intrinsische Breite.

Darüber hinaus können für ersetzte Elemente visuelle Formatierungsanforderungen gelten, die vom Browser oder Betriebssystem auferlegt werden und den CSS-Stil überschreiben. Schaltflächen verfügen beispielsweise über integrierte Benutzeroberflächensteuerelemente, die nicht ausschließlich über CSS geändert werden können.

Im Fall von Schaltflächen zeigen sie ein ähnliches Verhalten, obwohl sie vom W3C nicht offiziell als ersetztes Element definiert sind. Daher wird „display: block; width: auto;“ angewendet. Auf eine Schaltfläche wird diese nicht gestreckt, um den Container auszufüllen, da ihre eigentliche Breite durch die visuellen Formatierungsanforderungen der Schaltfläche eingeschränkt ist.

Das obige ist der detaillierte Inhalt vonWarum wird eine Schaltfläche nicht erweitert, um ihren Container mit „display: block“ und „width: auto“ zu füllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!