Wie lautet die Syntax des Attributs „contain' in CSS?

Das Attribut „contain“ in CSS wird verwendet, um anzugeben, ob ein Element andere Elemente enthalten oder darin enthalten sein soll. Durch Festlegen des Attributs „Contain“ können Sie dem Browser mitteilen, welche Elemente unabhängig verarbeitet werden sollen, und so die Renderleistung der Seite verbessern. Die Syntax des

contain-Attributs lautet wie folgt:

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

• layout: Gibt an, ob das Element unabhängig von anderen Elementen angeordnet werden soll. Optionale Werte sind: none, strict und 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

none: Gibt an, dass das Element weder das Layout anderer Elemente beeinflusst noch von anderen Elementen beeinflusst wird.

strict: Gibt an, dass das Element das Layout anderer Elemente beeinflusst, jedoch nicht von anderen Elementen beeinflusst wird. 🎜content: Gibt an, dass das Element nur von seinem direkten übergeordneten Element beeinflusst wird und keine anderen Elemente beeinflusst. 🎜🎜paint: Gibt an, ob das Element unabhängig von anderen Elementen gezeichnet werden soll. Optionale Werte sind: none und contents. 🎜🎜🎜none: Gibt an, dass das Element selbst nicht gezeichnet wird und keine visuellen Effekte erzeugt. 🎜contents: Gibt an, dass das Element gezeichnet wird und visuelle Effekte erzeugt. 🎜🎜size: Gibt an, ob die Größe des Elements unabhängig von anderen Elementen angepasst werden soll. Optionale Werte sind: none, content und strict. 🎜🎜🎜none: Gibt an, dass die Größenberechnung des Elements nicht von seinem internen Inhalt abhängt. 🎜content: Gibt an, dass die Größenberechnung des Elements von der Größe seines internen Inhalts abhängt. 🎜strict: Gibt an, dass die Größenberechnung eines Elements nur von der Größe seiner direkten untergeordneten Elemente abhängt und nichts mit dem internen Inhalt zu tun hat. 🎜🎜style: Gibt an, ob das Element unabhängig von anderen Elementen gestylt werden soll. Optionale Werte sind: none und contents. 🎜🎜🎜none: Gibt an, dass die Stilberechnung des Elements nicht von seinem internen Inhalt und seinen untergeordneten Elementen abhängt. 🎜contents: Gibt an, dass die Stilberechnung des Elements von seinem internen Inhalt und seinen untergeordneten Elementen abhängt. 🎜Im Folgenden finden Sie einige spezifische Codebeispiele: 🎜rrreee🎜Im obigen Beispiel legt die Klasse .container die Unabhängigkeit des Elements von anderen fest Elemente. Layout, die Klasse .box legt die Darstellung von Elementen unabhängig von anderen Elementen fest, die Klasse .img-container legt die Größenberechnung von Elementen unabhängig von anderen Elementen fest, .card Die Klasse richtet die Stilberechnung eines Elements unabhängig von anderen Elementen ein. 🎜🎜Durch die Verwendung des Attributs „Contain“ können wir die Leistung beim Rendern von Seiten optimieren, unnötige Reflow- und Neuzeichnungsvorgänge reduzieren und die Benutzererfahrung verbessern. 🎜

Das obige ist der detaillierte Inhalt vonWie lautet die Syntax des Attributs „contain' in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!