【早阅】CSS contain 属性

文章预览

作者：@Preethi Sam 原文：https://frontendmasters.com/blog/the-css-contain-property/ 背景 CSS 的  contain  属性（即 CSS containment）旨在提供两种主要功能：优化和样式可能性。通过将  contain  应用于元素，我们可以将其（及其后代）与页面的其余部分隔离，这种隔离为优化和样式提供了新的可能性。 contain  属性有多种类型，每种类型都有不同的功能，包括 size、paint、layout 等。 【第3350期】使用 CSS 创建奥林匹克环 要点 CSS containment 的主要目的是通过隔离元素来优化页面性能和提供更多的样式灵活性。 size .box { width : 100px ; min-height : 100px ; img { width : 200% ; ... } & :nth-of-type(2) { /* the second box */ contain : size ; ... } ... } paint .box { width : 100px ; img { width : 200% ; ... } & :nth-of-type(2) { /* second box */ cont ………………………………