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

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

CSS-Box-Modell und der Wahnsinn prozentualer Inkonsistenzen

Im Bereich CSS Das Div und seine beiden Eingabekinder scheinen sich aus ihren zugewiesenen Grenzen zu befreien. Was für eine Zauberei ist das?

Lasst uns dieses Rätsel lösen!

Die Ursache – die abweichende Natur von Padding

Gemäß den Prinzipien des CSS-Boxmodells spielen Breite und Höhe eines Elements gut mit das Inhaltsfeld. Die Polsterung geht jedoch gerne über diesen Rahmen hinaus und vergrößert das gesamte Element effektiv.

Durch die Anwendung von „width: 100 %“ auf ein Element mit Polsterung wird ihm unangemessener Spielraum gewährt, sodass es breiter als sein 100 % übergeordnetes Element wird. In diesem Fall werden die Eingaben breiter als ihr Container.

Box-Sizing zur Rettung

Um das schelmische Verhalten von Padding zu bändigen, führen wir die Box-Sizing-Eigenschaft ein. Durch die Einstellung „border-box“ wird sichergestellt, dass der Abstand innerhalb der definierten Abmessungen des Elements bleibt.

Erweiterte Vererbungstechnik

Die Webdesign-Experten Paul Irish und Chris Coyier befürworten die Vererbung Ansatz, propagiert durch das folgende Snippet:

html {
  box-sizing: border-box;
}

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

Demonstration

Um den Fix in Aktion zu erleben, hier der optimierte Code:

input[type=text],
input[type=password] {
  width: 100%;
  height: 30px;
  padding: 5px 10px;
  background-color: rgb(215, 215, 215);
  line-height: 20px;
  font-size: 12px;
  color: rgb(136, 136, 136);
  border-radius: 2px 2px 2px 2px;
  border: 1px solid rgb(114, 114, 114);
  box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);
  box-sizing: border-box;
}

Und voila! Kein Eingabefeld wagt es nun, seine Grenzen zu überschreiten. Die geistige Gesundheit des Boxmodells ist wiederhergestellt.

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