Quelle est la syntaxe de l'attribut contain en CSS ?

L'attribut contain en CSS est utilisé pour spécifier si un élément doit contenir ou être inclus dans d'autres éléments. En définissant l'attribut contain, vous pouvez indiquer au navigateur quels éléments doivent être traités indépendamment, améliorant ainsi les performances de rendu de la page. La syntaxe de l'attribut

contain est la suivante :

contain: layout [paint] [size] [style]

• layout : Indique si l'élément doit être disposé indépendamment des autres éléments. Les valeurs facultatives sont : none, strict et content. none、strict和content。

  • none：表示元素不会影响其他元素的布局，也不会被其他元素影响。
  • strict：表示元素会影响其他元素的布局，但不会被其他元素影响。
  • content：表示元素只会被其直接父级元素影响，而不会影响其他元素。

• paint：表示元素是否应该独立于其他元素进行绘制。可选值有：none和contents。

  • none：表示元素自身不会进行绘制，不会产生可视效果。
  • contents：表示元素会进行绘制，会产生可视效果。

• size：表示元素是否应该独立于其他元素进行尺寸计算。可选值有：none、content和strict。

  • none：表示元素的尺寸计算不依赖于其内部内容。
  • content：表示元素的尺寸计算依赖于其内部内容的大小。
  • strict：表示元素的尺寸计算只依赖于其直接子元素的大小，与内部内容无关。

• style：表示元素是否应该独立于其他元素进行样式计算。可选值有：none和contents。

  • none：表示元素的样式计算不依赖于其内部内容和子元素。
  • contents：表示元素的样式计算依赖于其内部内容和子元素。

下面是一些具体的代码示例：

/* 设置元素在布局上独立于其他元素 */
.container {
  contain: layout;
}

/* 设置元素在绘制上独立于其他元素 */
.box {
  contain: paint;
}

/* 设置元素在尺寸计算上独立于其他元素 */
.img-container {
  contain: size;
}

/* 设置元素在样式计算上独立于其他元素 */
.card {
  contain: style;
}

以上示例中，.container类设置了元素独立于其他元素的布局，.box类设置了元素独立于其他元素的绘制，.img-container类设置了元素独立于其他元素的尺寸计算，.card

aucun : indique que l'élément n'affectera pas la disposition des autres éléments, ni qu'il ne sera affecté par d'autres éléments.

strict : indique que l'élément affectera la disposition des autres éléments, mais ne sera pas affecté par les autres éléments. 🎜content : indique que l'élément ne sera affecté que par son élément parent direct et n'affectera pas les autres éléments. 🎜🎜paint : Indique si l'élément doit être dessiné indépendamment des autres éléments. Les valeurs facultatives sont : none et contents. 🎜🎜🎜aucun : Indique que l'élément lui-même ne sera pas dessiné et ne produira pas d'effets visuels. 🎜contents : Indique que l'élément sera dessiné et produira des effets visuels. 🎜🎜size : Indique si l'élément doit être dimensionné indépendamment des autres éléments. Les valeurs facultatives sont : none, content et strict. 🎜🎜🎜aucun : Indique que le calcul de la taille de l'élément ne dépend pas de son contenu interne. 🎜content : Indique que le calcul de la taille de l'élément dépend de la taille de son contenu interne. 🎜strict : Indique que le calcul de la taille d'un élément dépend uniquement de la taille de ses éléments enfants directs et n'a rien à voir avec le contenu interne. 🎜🎜style : Indique si l'élément doit être stylé indépendamment des autres éléments. Les valeurs facultatives sont : none et contents. 🎜🎜🎜aucun : Indique que le calcul du style de l'élément ne dépend pas de son contenu interne et de ses éléments enfants. 🎜contents : indique que le calcul du style de l'élément dépend de son contenu interne et de ses éléments enfants. 🎜Voici quelques exemples de code spécifiques : 🎜rrreee🎜Dans l'exemple ci-dessus, la classe .container définit l'indépendance de l'élément par rapport aux autres elements Layout, la classe .box définit le dessin des éléments indépendamment des autres éléments, la classe .img-container définit le calcul de la taille des éléments indépendamment des autres éléments, .card La classe configure le calcul du style d'un élément indépendamment des autres éléments. 🎜🎜En utilisant l'attribut contain, nous pouvons optimiser les performances de rendu des pages, réduire les opérations de redistribution et de redessinage inutiles et améliorer l'expérience utilisateur. 🎜

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!