css样式控制元素显示和隐藏

早上起床看到一篇文，介绍 content-visibility 的，不知道你知不知道，反正我是第一次知道哈哈哈哈
在一波知识的输入之后，于是就有了这篇文~
讲讲css样式控制元素显示和隐藏

方法：

要隐藏一个元素，五秒内你能想到什么方法？

1. opacity：0，将元素的透明度设置为透明，只是看不到而已，但是原有的特性都是在的（占位、点击事件等）
2. visibility：hidden，保持原来的占位，但是不会触发该元素已经绑定的事件（重绘）；可以理解为，占了个位子，但是人不在，别人不能坐这个位子
3. display：none，把元素隐藏起来，并且会改变页面布局，在文档布局中不再分配空间（回流+重绘）可以理解为，人走了，东西也搬走了，别人可以坐这个位子
4. content-visibility：auto: 当界面需要展示元素时，元素才进行渲染；有点像，预约座位，当知道这个人要来坐这个位子了，才把位子让出来给他

前3个其实日常也比较常见，主要掌握的就是可以区分他们之间的差异性，根据其特点合理选择
这篇文章我主要是讲讲我对content-visiblity的理解

content-visiblity

属性：

1. visible：默认
2. hidden：类似display：none，用户代理将跳过元素的内容的渲染（注意是内容，也就是子元素）
3. auto： 当界面需要展示/使用元素时，元素才进行渲染

使用：

1. content-visiblity：hidden；可以用于，内容（子元素）需要切换的显示隐藏的场景，通过控制父元素来控制子元素的显示隐藏。元素的子元素会被隐藏，但是渲染状态会缓存，切换时也不需要重新渲染元素本身以及子元素

	.我是想要控制子元素隐藏的父盒子{
		content-visiblity：hidden;
	}

3. content-visiblity：auto；：懒加载；可以用于内容过多的情形，给盒子设置content-visiblity：auto;当内容无需展示且用户不需要操作到时，不进行渲染。可以减少浏览器初次渲染的压力，加快渲染速度。
   会有一个抖动的问题，利用content-interinsic-size: 500px; 设置好盒子渲染高度，这样进度条就不会因为页面内容的增多和抖动

	.我是包括长文章内容的父盒子{
		content-visiblity：auto;
		content-interinsic-size: 500px;
	}

上面的其实是一些我的个人理解和总结吧~毕竟教程说得也很好了！想要深入了解的：戳

文章最后我觉得作者有句话说得很好，这个content-visiblity：auto虽然是兼容性不是很好，但并不妨碍我们去了解他。
这是一个性能优化的一个方法也是一个思想，知道了有这个东西的存在，我们会有新的思路或者是意识去提高性能