Warum füllen Eingabeelemente auf Blockebene ihre Container nicht immer wie Divs?

Als Block angezeigte Eingabeelemente: Warum sie sich von Divs unterscheiden

Es ist üblich, ein Eingabeelement mit display: block und width wahrzunehmen: auto verhält sich ähnlich wie ein Div und nimmt die gesamte Breite seines Containers ein. Wie im angegebenen Codeausschnitt zu sehen ist, ist dies jedoch nicht der Fall.

Verstehen der Diskrepanz

Im Gegensatz zu Divs folgen Eingabeelemente einem anderen Box-Modell, bekannt als das Border-Box-Modell. Dieses Modell berücksichtigt Auffüllungen und Ränder bei der Berechnung der Gesamtbreite, im Gegensatz zum Content-Box-Modell, das für Divs verwendet wird.

Überwindung des Problems

Um die Spannweite eines Eingabeelements zu erzwingen Um die volle Containerbreite zu erreichen und dabei die Polsterung und Ränder zu berücksichtigen, kann die Eigenschaft „max-width: 100 %“ verwendet werden. Diese Technik beschränkt im Wesentlichen die Breite des Eingabeelements auf seinen übergeordneten Container, auch wenn die berechnete Breite diesen Wert aufgrund seines Randes und seiner Auffüllung überschreitet.

Browserübergreifende Kompatibilität

Um ein konsistentes Verhalten über alle Browser hinweg zu erreichen, kann die kürzlich eingeführte Eigenschaft „box-sizing: border-box“ verwendet werden. Diese Eigenschaft weist den Browser explizit an, das Border-Box-Modell für das Zielelement zu verwenden, unabhängig von seinem Standard-Box-Modell.

Implementierung

Der folgende Code demonstriert diese Lösung :

<div class="wrapper">
  <input type="text" class="input" placeholder="Input Text">
</div>

<style>
  .wrapper {
    width: 500px;
    border: 1px solid black;
    padding: 20px;
  }

  .input {
    width: 100%;
    box-sizing: border-box;
  }
</style>

Dieser Ansatz stellt sicher, dass das Eingabeelement in allen Hauptbereichen die gesamte Breite des Containers einnimmt Browser.

Das obige ist der detaillierte Inhalt vonWarum füllen Eingabeelemente auf Blockebene ihre Container nicht immer wie Divs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!