contain属性的作用:向浏览器解释网页的布局,让浏览器可以据此做一些性能优化。如果你的网页是静态网页,浏览器只需要在加载页面的时候做一次渲染,那么contain属性就没什么作用了。
contain属性的取值:
- layout: 向浏览器说明元素内和元素外的布局互不侵犯。相当于做了三件事情
1.display: flow-root,创建BFC(Block Formatting Context)
2.position: relative,创建了containing block
3.可以使用z-index属性,相当于创建了stacking context - paint: 内部元素超过包含元素的部分不可见
- size: 元素的大小不会改变,如果元素没有指定高度而是靠内部的元素扩展的话,那么这个元素的高度为0
- content: layout+paint
- strict: layout+paint+strict
参考:https://www.smashingmagazine.com/2019/12/browsers-containment-css-contain-property/