Wie kann verhindert werden, dass CSS-Eingaben mit „Breite: 100 %' die übergeordneten Grenzen überschreiten?

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

In CSS werden die Breite und Höhe eines Elements auf seinen Inhaltsbereich angewendet, einschließlich der Auffüllung. Wenn Sie jedoch ein Element mit Auffüllung auf 100 % Breite festlegen, kann es dazu führen, dass es die Größe seines übergeordneten Elements überschreitet.

Das CSS-Basis-Boxmodell verstehen

Das CSS-Basis-Boxmodell definiert die Größe und das Layout eines Elements werden berechnet. Es besteht aus Inhalt, Abstand, Rahmen und Rand.

Wenn Breite: 100 % angewendet wird, wirkt sich dies auf die Breite des Inhaltsbereichs aus. Wenn das Element jedoch über eine Polsterung verfügt, erstreckt es sich über den Inhaltsbereich hinaus und vergrößert so effektiv seine Gesamtgröße.

Die Polsterungsbarriere durchbrechen

Um zu verhindern, dass die Polsterung die Breite und Höhe eines Elements beeinflusst, legen Sie das Kästchen fest -sizing CSS-Eigenschaft für Border-Box:

box-sizing: border-box;

Dies weist den Browser an, den Abstand innerhalb der Breite und Höhe des Elements einzuschließen, um dies zu verhindern davon ab, sich über die Grenzen des übergeordneten Browsers hinaus auszudehnen.

Browserkompatibilität

Box-Sizing wird von allen gängigen Browsern unterstützt, aber erwägen Sie die Verwendung von Präfixen für ältere Versionen von Internet Explorer (vor Version 8).

Box-Sizing im Kontext verwenden

Um das Problem in Ihrer bereitgestellten JSFiddle zu beheben, fügen Sie Box-Sizing hinzu: Grenzfeld; den folgenden Regeln:

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

Empfohlene „geerbte“ Verwendung

Paul Irish und Chris Coyier empfehlen, die Boxgröße vom HTML-Element zu erben, um Konsistenz auf der gesamten Seite sicherzustellen:

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass CSS-Eingaben mit „Breite: 100 %' die übergeordneten Grenzen überschreiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!