content-visibility有三个属性值,分别为visibility、hidden、auto :
- content-visibility:visibility,为默认值,没有任何效果,相当于没有添加,元素的渲染和往常一样
- content-visibility:hidden,元素的子元素被隐藏
- content-visibility:auto,视口的元素被显示
content-visibility:visibility与display:none的区别:
- 设置了display:none的元素及其子元素都不会被渲染
- 设置了content-visibility:visibility的元素的子元素不会被渲
- 设置了content-visibility:visibility,会产生滚动条抖动问题,这不是一个好的体验,使用 contain-intrinsic-size属性来解决这个问题
contain-intrinsic-size:控制由content-visibility制定的元素的自然大小,如果能够准确知道了设置content-vosobility:auto的元素在渲染状态下的高度,就设置为对应的高度,如果无法准确知道对应的高度,就可以填写一个大概的值
<style>
.dad {
width: 500px;
background-color: pink;
}
.son {
width: 400px;
background-color: skyblue;
content-visibility: auto;
contain-intrinsic-size: 400px;
}
</style>
<body>
<div class="dad">
<div class="son">
银白的月光洒在地上,到处都有蟋蟀的凄切的叫声。夜的香气弥漫在空中,织成了一个柔软的网,把所有的景物都罩在里面。眼睛所接触到的都是罩上这个柔软的网的东西,任是一草一木,都不是象在白天里那样地现实了,它们都有着模糊、空幻的色彩,每一样都隐藏了它的细致之点,都保守着它的秘密,使人有一种如梦如幻的感觉。
(巴金《家》)
月光如银子,无处不可照及,山上竹篁在月光下变成了一片黑色。身边草丛中虫声繁密如落雨。间或不知道从什么地方,忽然会有一只草莺“落落落落嘘”啭着它的喉咙,不久之间,这小鸟儿又好象明白这是半夜,不应当那么吵闹,便仍然闭着那小小眼儿安睡了。
(沈从文《边城》)
他靠纱窗望出去。满天的星又密又忙,它们声息全无,而看来只觉得天上热闹。一梳月亮象形容未长成的女孩子,但见人已不羞缩,光明和轮廓都清新刻露,渐渐可烘衬夜景。小园草地里的小虫琐琐屑屑地在夜谈。不知哪里的蛙群齐心协力地干号,象声浪给火煮得发沸。几星萤火优游来去,不象飞行,象在厚密的空气里漂浮,月光不到的阴黑处,一点萤火忽明,象夏夜的一只微绿的小眼睛。
(钱钟书《围城》)
</div>
....包含了N个son
<div class="son">
银白的月光洒在地上,到处都有蟋蟀的凄切的叫声。夜的香气弥漫在空中,织成了一个柔软的网,把所有的景物都罩在里面。眼睛所接触到的都是罩上这个柔软的网的东西,任是一草一木,都不是象在白天里那样地现实了,它们都有着模糊、空幻的色彩,每一样都隐藏了它的细致之点,都保守着它的秘密,使人有一种如梦如幻的感觉。
(巴金《家》)
月光如银子,无处不可照及,山上竹篁在月光下变成了一片黑色。身边草丛中虫声繁密如落雨。间或不知道从什么地方,忽然会有一只草莺“落落落落嘘”啭着它的喉咙,不久之间,这小鸟儿又好象明白这是半夜,不应当那么吵闹,便仍然闭着那小小眼儿安睡了。
(沈从文《边城》)
他靠纱窗望出去。满天的星又密又忙,它们声息全无,而看来只觉得天上热闹。一梳月亮象形容未长成的女孩子,但见人已不羞缩,光明和轮廓都清新刻露,渐渐可烘衬夜景。小园草地里的小虫琐琐屑屑地在夜谈。不知哪里的蛙群齐心协力地干号,象声浪给火煮得发沸。几星萤火优游来去,不象飞行,象在厚密的空气里漂浮,月光不到的阴黑处,一点萤火忽明,象夏夜的一只微绿的小眼睛。
(钱钟书《围城》)
</div>
<div>结束</div>
</div>
</body>