CSS之visibility和display的差别

今天又看到一个坑爹的CSS属性，即标题所说。以前一直用的是display：none。然后我试了下那篇文章上说的。设置了下visivblity:hidden的效果。最开始让我有点儿想当然了

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .test1 {
            width: 300px;
            height: 300px;
            background: red;
            float: left;
            visibility: hidden;
        }
        
        .test2 {
            width: 300px;
            height: 300px;
            background: green;
            float: left;
        }
    </style>
    <script>
        window.onload = function() {

            document.getElementById("div1").onclick = function() {
                alert("OK");
            };


        }
    </script>
</head>

<body>
    <div class="test1" id="div1">

    </div>
    <div class="test2">

    </div>
</body>

</html>

感觉上是不就是opacity设置为0的效果吗？如果是的话，那么我给它设置事件，在opacity为0的条件下点击会有事件响应的，但是我加上事件之后，发现并不是的。

于是得出结论visibility:hidden介于display:none和opacity:0之间。我暂时没有找到这个的用处，不过常见的自定义上传按钮，就是在一个背景图片上放一个<input type="file" />，然后将它的opacity置为0，这样就比较美观大方了。