【Hacker News搬运】包含–CSS级联样式表–MDN

hackernews

Title: Contain – CSS Cascading Style Sheets – MDN

包含–CSS级联样式表–MDN

Text:

Url: https://developer.mozilla.org/en-US/docs/Web/CSS/contain

以下是对Mozilla开发者文档中关于`contain` CSS属性内容的抓取与分析，并翻译成中文：

---

**标题：CSS contain 属性**

**概述：**
`contain` 属性是一个CSS布局属性，用于指定元素的哪些部分被限制在元素内部。当使用`contain`属性时，浏览器可以优化布局和绘制，从而提高性能。

**语法：**
```css
contain: none | [ size ] [ size ] [ feature* ];

值：

none：默认值，表示没有任何内容被限制。
[size]：指定元素的内容、边框和内填充是否被限制。值可以是content、layout、size、paint或style。
[feature*]：指定要包含的特定功能，例如layout、style、paint、size等。

示例：

div {
  contain: content layout paint;
}

在这个例子中，div元素的内容、布局和绘制被限制在其内部，这有助于浏览器优化性能。

说明：

当contain属性应用于一个元素时，浏览器可能会跳过那些不包含在contain值中的层级的某些布局和绘制步骤。
使用contain可以提高性能，尤其是在处理大型或复杂的布局时。
contain属性通常与display: contents;属性一起使用，以将元素的内容视为其子元素。

注意：

contain属性不适用于所有CSS属性，仅适用于特定的属性集。
在使用contain属性时，需要仔细考虑其效果，以确保它不会影响布局或样式。

以上内容是对Mozilla开发者文档中contain属性部分的抓取与分析，已经翻译成中文。希望这能帮助您更好地理解contain属性及其在CSS中的作用。

        
## Post by: aabhay
        
### Comments: 
        
**TimesNewMe**: Here&#x27;s a recent article by Josh W Comeau that explains how this keyword is instrumental to using container queries: <a href="https:&#x2F;&#x2F;www.joshwcomeau.com&#x2F;css&#x2F;container-queries-introduction&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.joshwcomeau.com&#x2F;css&#x2F;container-queries-introducti...</a>
> **TimesNewMe**: 这里；这是Josh W Comeau最近的一篇文章，解释了这个关键字如何有助于使用容器查询：<a href=“https:”www.joshwcomeau.com“css”容器查询介绍“rel=”nofollow“>https:”&#x2F；www.joshwcomeau.com；css；容器查询简介</一
            
**Brajeshwar**: This could have worked magic when we used to develop and design many embeddable widgets—the days of `!important` at the end of each line.<p>Today, someone can become pretty good with CSS without ever considering how the Box Model will impact a container&#x2F;wrapper.
> **Brajeshwar**: 当我们过去开发和设计许多可嵌入的小部件时，这可能会起到神奇的作用——在“！每行末尾的“重要”<p> 如今，有人可以很好地使用CSS，而无需考虑Box模型将如何影响容器；包装。
            
**Waterluvian**: This is one of those features that I suspect would be incredibly useful for some of my applications but I just can’t quite see it yet. Maybe a page of real world examples might help, if anyone has any?<p>This page got me a bit closer I think: <a href="https:&#x2F;&#x2F;css-tricks.com&#x2F;almanac&#x2F;properties&#x2F;c&#x2F;contain&#x2F;" rel="nofollow">https:&#x2F;&#x2F;css-tricks.com&#x2F;almanac&#x2F;properties&#x2F;c&#x2F;contain&#x2F;</a>
> **Waterluvian**: 这是我怀疑对我的一些应用程序非常有用的功能之一，但我还不能完全看到它。也许一页真实世界的例子可能会有所帮助，如果有人有的话<p> 我认为这个页面让我离目标更近了一点：<a href=“https:”css-tricks.com“almanac”properties“c”contains“rel=”nofollow“>https:”&#x2F；css技巧.com；年鉴；属性&#x2F；c；包含</一