首页 > 其他分享 >【W3学习】CSS Containment Module Level 1(CSS 包含模块)

【W3学习】CSS Containment Module Level 1(CSS 包含模块)

时间:2022-11-09 13:56:59浏览次数:40  
标签:layout Level containment Module element paint contain CSS size

这个 CSS 模块描述了 contains 属性,它表明元素的子树独立于页面的其余部分。这使得用户代理在使用良好时可以进行大量优化。

 

 

{
  /* No layout containment. */
  contain: none;
  /* Turn on size containment for an element. */
  contain: size;
  /* Turn on layout containment for an element. */
  contain: layout;
  /* Turn on style containment for an element. */
  contain: style;
  /* Turn on paint containment for an element. */
  contain: paint;
 
  /* Turn on containment for layout, paint, and size. */
  contain: strict;
  /* Turn on containment for layout, and paint. */
  contain: content;
}

 

这个 contain 属性的主要目的是隔离指定内容的样式、布局和渲染。开发人员可以使用这个 contain 属性来限制指定的DOM元素和它的子元素同页面上其它内容的联系;我们可以把它看做一个iframe。跟iframe很相似,它能建立起一个边界,产生一个新的根布局;保证了它和它的子元素的DOM变化不会触发父元素重新布局、渲染等。

none
This value indicates that the property has no effect. The element renders as normal, with no containment effects applied.


strict
This value computes to size layout paint, and thus turns on all forms of containment for the element. In other words, it behaves the same as contain: size layout paint;. .


content
This value computes to layout paint, and thus turns on all forms of containment except size containment for the element. In other words, it behaves the same as contain:layout paint;. .

Note: contain: content is reasonably "safe" to apply widely; its effects are fairly minor in practice, and most content won’t run afoul of its restrictions. However, because it doesn’t apply size containment, the element can still respond to the size of its contents, which can cause layout-invalidation to percolate further up the tree than desired. Use contain: strict when possible, to gain as much containment as you can.

size
The value turns on size containment for the element. This ensures that the containment box can be laid out without needing to examine its descendants.


layout
This value turns on layout containment for the element. This ensures that the containment box is totally opaque for layout purposes; nothing outside can affect its internal layout, and vice versa.


paint
This value turns on paint containment for the element. This ensures that the descendants of the containment box don’t display outside its bounds, so if an element is off-screen or otherwise not visible, its descendants are also guaranteed to be not visible.

浏览器兼容性问题:

 

标签:layout,Level,containment,Module,element,paint,contain,CSS,size
From: https://www.cnblogs.com/facenano/p/16873360.html

相关文章

  • css布局
    圣杯布局圣杯布局:左右两边固定,中间自适应的布局方式,效果图如下:(1)采用绝对定位方式实现圣杯布局,主要思路是左右两边的盒子采用绝对定位固定宽高,中间的盒子用margin-left和......
  • CSS基础(八) --- 动画
    vw和100%的区别若没有出现滚动条,则二者相等若出现滚动条vw包含'滚动条'部分,窗口大小100%不包含'滚动条',占满剩余空间demo演示:未添加滚动条效果,......
  • 【W3学习】CSS View Transitions Module Level 1(CSS 视图转换模块)
    该模块定义了视图转换API,以及相关的属性和伪元素。html{page-transition-tag:root;}html::page-transition{position:fixed;inset:0;}html::page-t......
  • 【W3学习】CSS Box Model Module Level 4(CSS 盒子模型模块)
    这个规范描述了margin和padding属性,它们在CSS框内和周围创建间距。以后可能会扩展到包括边框(目前在[css-backgrounds-3]中描述)。  Eachboxhasacontentar......
  • 【W3学习】CSS Box Model Module Level 3(CSS 盒子模型模块)
    这个规范描述了margin和padding属性,它们在CSS框内和周围创建间距。   content-boxReferstothecontentboxorcontentedge.(InanSVGcontext,treate......
  • 19个免费好用的CSS代码样式生成器工具
    整理编辑| 杨小爱CSS生成器可以帮助每个开发人员的生活变得轻松,提升工作效率,因为它可以立即实现大部分CSS效果,如阴影、边框、按钮颜色/形状等等。在本文中,我将分享19......
  • 5个可视化 CSS 网格布局生成器
    英文|https://blog.bitsrc.io/top-5-css-grid-layout-generators-f7743f0dfad2翻译|杨小二现代Web应用程序是响应式的。尽管很多CSS库和框架都支持Grid系统,但使用......
  • HTML5+CSS3
    一、HTML基础(一)HTML1、常用浏览器​内核浏览器备注IETridentIE,猎豹,360,百度FireFoxGecko火狐SafariWebkit苹果chrome/operaBlinkchrome/......
  • css 文本属性
            ......
  • CSS框架 --- Windin.css + vite + vue3.0 + Vscode的配置
    前沿:一款轻量级的css库类似于bootstrap的css库但是更轻量不会初始化就全量加载进来  按需加载前端开发中可以减少很多样式代码减少冗余样式代码非常nice!官网......