Warum erstreckt sich eine CSS-Eingabe mit „width: 100 %' über den übergeordneten Container hinaus?

CSS-Eingabe mit der Breite: 100 % geht außerhalb der übergeordneten Grenze

Möglicherweise sind Sie auf eine Situation gestoßen, in der ein Eingabefeld mit der Breite: 100 % über den übergeordneten Container hinausgeht CSS. Dies liegt an der Art und Weise, wie das CSS-Boxmodell den Abstand verarbeitet.

Standardmäßig werden Abstand und Rand zusätzlich zur Breite und Höhe eines Elements hinzugefügt. Normalerweise ist das kein Problem. Wenn einem Element jedoch Auffüllung hinzugefügt wurde und die Breite 100 % beträgt, verschiebt die Auffüllung den Inhalt über die Grenze des übergeordneten Elements hinaus.

Um dies zu verhindern, müssen wir ändern, wie das Boxmodell mit Auffüllung umgeht. Die CSS-Eigenschaft box-sizing ermöglicht uns dies. Durch die Festlegung von box-sizing: border-box wird der Abstand in die Breite und Höhe des Elements einbezogen, wodurch das Problem effektiv behoben wird.

input[type=text],
input[type=password] {
  box-sizing: border-box;
  width: 100%;
  ...
}

Diese Änderung stellt sicher, dass die Eingabefelder die Grenzen ihrer übergeordneten Felder nicht überschreiten. auch mit Polsterung. Denken Sie daran, die Browserkompatibilität hinsichtlich der Boxgröße zu überprüfen.

Das obige ist der detaillierte Inhalt vonWarum erstreckt sich eine CSS-Eingabe mit „width: 100 %' über den übergeordneten Container hinaus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!