Le rôle et la syntaxe de l'attribut contain en CSS

Le rôle de la syntaxe contain en CSS

En CSS, contain est un attribut très utile, qui peut affecter la disposition et le rendu des éléments. Sa fonction principale est d'indiquer au navigateur comment gérer le contenu de l'élément et contrôler la relation entre l'élément et les autres éléments.

L'attribut contain a quatre valeurs facultatives : none, strict, content et size. Ci-dessous, nous discutons en détail du rôle de chaque valeur et fournissons des exemples de code correspondants.

1. none : Il s'agit de la valeur par défaut de l'attribut contain, ce qui signifie que le contenu de l'élément peut librement déborder vers l'élément parent ou d'autres éléments. Il s'agit également d'un comportement CSS traditionnel.

Exemple de code :

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

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

Dans le code ci-dessus, la largeur et la hauteur du div du conteneur sont toutes deux de 200 pixels, et overflow:hidden est défini. La largeur et la hauteur du texte div sont toutes deux de 300 pixels, ce qui dépasse la taille du conteneur. Étant donné que la valeur de l'attribut contain est définie sur none, le texte débordera en dehors du conteneur.

2. strict : Cette valeur indique au navigateur d'appliquer des contraintes strictes pour garantir que l'élément ne dépasse pas les limites.

Exemple de code :

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

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

Dans le code ci-dessus, la largeur et la hauteur du div du conteneur sont toujours de 200 pixels, et overflow:hidden est défini. Mais comme la valeur de l'attribut contain est définie sur stricte, le navigateur ajustera automatiquement la taille du texte div pour garantir qu'il ne dépasse pas les limites du conteneur.

3. content : Cette valeur indique au navigateur de considérer uniquement le contenu de l'élément lui-même, quelles que soient la taille et la position de ses éléments enfants.

Exemple de code :

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

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

Dans le code ci-dessus, la largeur et la hauteur du div du conteneur sont toujours de 200 pixels, et overflow:hidden est défini. Cependant, comme la valeur de l'attribut contain est définie sur content, le texte div débordera toujours en dehors du conteneur, car le navigateur ne prend en compte que la taille de l'élément lui-même et n'ajuste pas la taille des éléments enfants.

4. size : Cette valeur indique au navigateur que l'élément doit être redimensionné à la taille minimale qui correspond à son contenu.

Exemple de code :

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

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

Dans le code ci-dessus, la largeur et la hauteur du div du conteneur sont toujours de 200 pixels, et overflow:hidden est défini. Mais comme la valeur de l'attribut contain est définie sur size, le navigateur redimensionnera le texte div afin qu'il corresponde à la taille du conteneur.

Résumé

Le rôle de l'attribut contain en CSS est de contrôler la façon dont le contenu d'un élément est présenté et la relation entre l'élément et les autres éléments. En utilisant l'attribut contain, nous pouvons obtenir une mise en page plus précise et de meilleurs effets de rendu. En fonction de la valeur, nous pouvons contrôler le débordement, le redimensionnement et l'effet des éléments enfants. Comprendre et utiliser habilement l'attribut contain nous aidera à mieux contrôler et optimiser la mise en page des pages Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!