容易忽略的CSS特性

2020-05-05 07:21:48易采站长站整理

是的:checked也会选择被选中的option
并不是所有图片都会被加载
我们知道写在页面上的img标签,无论显示与否,图片都会被加载(所以试图通过对图片display:none来达到节省网络流量的做法就省省吧。。。),我们也经常使用backgroung-image等css属性为页面添加图片,这些图片是不是一定会被加载呢,看个例子

CSS Code复制内容到剪贴板

<!doctype html>    
<html lang="en">    
<head>    
<meta charset="UTF-8">    
<title>Document</title>    
<style type="text/css">    
.useless{    
background-image: url(images/0.jpg);    
}    
.hidden{    
background-image: url(images/1.jpg);    
}    
.none{    
background-image: url(images/2.jpg);    
}    
.parentHidden{    
background-image: url(images/3.jpg);    
}    
.parentNone{    
background-image: url(images/4.jpg);    
}    
</style>    
</head>    
<body>    
<div class="hidden"></div>    
<div class="none"></div>    
<div style="visibility:hidden;">    
<div class="parentHidden"></div>    
</div>    
<div style="display:none;">    
<div class="parentNone"></div>    
</div>    
<div style="display:none">    
<img src="images/5.jpg"></div>    
</body>    
</html>   
看一下网络监视情况(怎么柳岩的照片变小后感觉怪怪的。。。)

我们可以发现图片0和4没有被下载,0是没有用到的CSS,4是父容器的display被设为none的情况,这两种情况下的CSS引用的图片是不会被加载的,而父容器设置visibility属性为hidden仍然会加载图片,不要搞混了