如题: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;
}
}