Die Rolle und Syntax des Attributs „contain“ in CSS

Die Rolle der Contain-Syntax in CSS

Contain ist in CSS ein sehr nützliches Attribut, das sich auf das Layout und die Darstellung von Elementen auswirken kann. Seine Hauptfunktion besteht darin, dem Browser mitzuteilen, wie er mit dem Inhalt des Elements umgehen soll, und die Beziehung zwischen dem Element und anderen Elementen zu steuern.

Das Attribut „contain“ hat vier optionale Werte: „none“, „strict“, „content“ und „size“. Im Folgenden besprechen wir die Rolle jedes Werts im Detail und stellen entsprechende Codebeispiele bereit.

1. none: Dies ist der Standardwert des Attributs „contain“, was bedeutet, dass der Inhalt des Elements frei in das übergeordnete Element oder andere Elemente überlaufen kann. Dies ist ebenfalls traditionelles CSS-Verhalten.

Beispielcode:

.container {
  contain: none;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}

.text {
  width: 300px;
  height: 300px;
  background-color: red;
}

Im obigen Code betragen Breite und Höhe des Container-Div jeweils 200 Pixel und overflow:hidden ist festgelegt. Die Breite und Höhe des Text-Div betragen jeweils 300 Pixel, was die Größe des Containers überschreitet. Da der Wert des Attributs „Contain“ auf „Keine“ gesetzt ist, läuft der Text außerhalb des Containers über.

2. strict: Dieser Wert weist den Browser an, strenge Einschränkungen anzuwenden, um sicherzustellen, dass das Element die Grenzen nicht überschreitet.

Beispielcode:

.container {
  contain: strict;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}

.text {
  width: 300px;
  height: 300px;
  background-color: red;
}

Im obigen Code betragen Breite und Höhe des Container-Div immer noch 200 Pixel und overflow:hidden ist festgelegt. Da der Wert des Attributs „contain“ jedoch auf „strikt“ festgelegt ist, passt der Browser die Größe des Text-Div automatisch an, um sicherzustellen, dass es nicht über die Grenzen des Containers hinausgeht.

3. content: Dieser Wert weist den Browser an, nur den Inhalt des Elements selbst zu berücksichtigen, unabhängig von der Größe und Position seiner untergeordneten Elemente.

Beispielcode:

.container {
  contain: content;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}

.text {
  width: 300px;
  height: 300px;
  background-color: red;
}

Im obigen Code betragen Breite und Höhe des Container-Div immer noch 200 Pixel und overflow:hidden ist festgelegt. Da der Wert des Attributs „Contain“ jedoch auf „Inhalt“ gesetzt ist, läuft das Text-Div immer noch außerhalb des Containers über, da der Browser nur die Größe des Elements selbst berücksichtigt und die Größe der untergeordneten Elemente nicht anpasst.

4. size: Dieser Wert teilt dem Browser mit, dass die Größe des Elements auf die Mindestgröße geändert werden soll, die zu seinem Inhalt passt.

Beispielcode:

.container {
  contain: size;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}

.text {
  width: 300px;
  height: 300px;
  background-color: red;
}

Im obigen Code betragen Breite und Höhe des Container-Div immer noch 200 Pixel und overflow:hidden ist festgelegt. Da der Wert des Attributs „contain“ jedoch auf „size“ festgelegt ist, passt der Browser die Größe des Text-Div an, sodass es zur Größe des Containers passt.

Zusammenfassung

Die Rolle des Attributs „contain“ in CSS besteht darin, zu steuern, wie der Inhalt eines Elements angeordnet ist und welche Beziehung zwischen dem Element und anderen Elementen besteht. Durch die Verwendung des Attributs „Contain“ können wir ein präziseres Layout und bessere Rendering-Effekte erzielen. Abhängig vom Wert können wir den Überlauf, die Größenänderung und die Wirkung untergeordneter Elemente steuern. Wenn wir das Attribut „Contain“ verstehen und geschickt verwenden, können wir das Layout von Webseiten besser steuern und optimieren.

Das obige ist der detaillierte Inhalt vonDie Rolle und Syntax des Attributs „contain“ in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!