Warum geht eine CSS-Eingabe mit „width: 100 %' über die Grenzen ihres übergeordneten Elements hinaus?

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

Warum passiert das?

In CSS legen die Eigenschaften „Breite“ und „Höhe“ fest Größe der Inhaltsbox. Die Polsterung wird jedoch außerhalb des Inhaltsfelds hinzugefügt, wodurch sich die Gesamtgröße des Elements erhöht.

Wenn Sie ein Element mit Polsterung auf Breite: 100 % festlegen, wird es durch die Polsterung breiter als 100 % seines enthaltenden Elements.

Die Lösung

Um zu verhindern, dass sich die Auffüllung auf die Breite oder Höhe eines Elements auswirkt, verwenden Sie die Box-Sizing-Eigenschaft, die auf eingestellt ist border-box:

box-sizing: border-box;

Dadurch umfassen die Breiten- und Höheneigenschaften den Abstand und den Rand, was zu einer Gesamtbreite von 100 % führt.

Browserkompatibilität

Box -sizing hat eine gute Browserkompatibilität (IE8). Es sind keine Präfixe erforderlich.

Alternativer Ansatz: „Geerbte“ Boxgröße

Einige Experten empfehlen die Verwendung des folgenden „geerbten“ Ansatzes:

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

Dadurch wird die Boxgröße festgelegt zum Rahmen für das gesamte Dokument und ermöglicht allen Elementen, dies zu erben Einstellung.

Demonstration

Hier ist eine Demonstration mit der auf die Eingabeelemente angewendeten Rahmenbox:

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

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