小疑问：display|visibility|opacity

如题：display:none、visibility:hidden、opacity:0的区别
共同点：
这三者都会在DOM生成节点，可以用document.querySelector()获取；
visibility和opacity都会在文档中保留空间。

不同点：
display不在文档中保留空间，其子元素也会关闭显示。

针对优化：
display:none 针对图片资源的隐藏还是会有图片的请求；
可以通过用背景来显示图片结合媒体查询display:none减少不必要的图片请求；
如果还不清楚可以到原博主：https://zhuanlan.zhihu.com/p/141840867学习

.disnone{
width:500px;
height:500px;
background:url(./1.png);
/*通过后续设置display:none减少图片资源请求*/
}

@media (max-width:500px){
.disnone{
display:none;
}
}