建网站资料,网站开发流行,wordpress写的网站,小程序开发公司网content-visibility是CSS新增的属性#xff0c;主要用来提高页面渲染性能#xff0c;它可以控制一个元素是否渲染其内容#xff0c;并且允许浏览器跳过这些元素的布局与渲染。
content-visibility: hidden的效果与display: none类似其区别在于#xff1a;
content-visibi…content-visibility是CSS新增的属性主要用来提高页面渲染性能它可以控制一个元素是否渲染其内容并且允许浏览器跳过这些元素的布局与渲染。
content-visibility: hidden的效果与display: none类似其区别在于
content-visibility: hidden 只是隐藏了子元素自身不会被隐藏content-visibility: hidden 隐藏内容的渲染状态会被缓存所以当它被移除或者设为可见时浏览器不会重新渲染而是会应用缓存所以对于需要频繁切换显示隐藏的元素这个属性能够极大地提高渲染性能。 contain-intrinsic-size 可以为元素指定以下一个或两个值。如果指定了两个值则第一个值适用于宽度第二个值适用于高度。如果指定单个值则它适用于宽度和高度。
contain-intrinsic-widthcontain-intrinsic-height templatediv classcard_itemdiv classcard_innerimg :srcbook.bookCover classbook_cover /div classcard_item_rightdiv classbook_title{{ ${book.bookName}${index 1} }}/divdiv classbook_author{{ book.catlog }}/divdiv classbook_tagsdiv classbook_tag v-for(item, index) in book.tags :keyindex{{ item }}/div/divdiv classbook_desc{{ book.desc }}/div/div/div/div
/templatescript setup langts
import { toRefs } from vue;const props defineProps{book: any;index: any;
}();
const { book, index } toRefs(props);
/scriptstyle langless scoped
.card_item {margin: 20px auto;content-visibility: auto;contain-intrinsic-size: 200px;
}
/style
