visibility: hidden；与display:none；区别

`visibility:hidden;`和`display:none;`的区别：

visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，
display:none属性会使这个对象彻底消失不显示，也不再占用位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=div, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{float: left;}
        .box1{
            width: 200px;
            height: 200px;
            background: #c55e5e;
            visibility: hidden;/* 设置visibility:hidden;该盒子消失，但是位置仍然保留（页面中也要占他本身大小的位置,） */
        }
        .box2{
            width: 200px;
            height: 200px;
            background: #5e71c5;
        }
        .box3{
            width: 200px;
            height: 200px;
            background: #5faa59;
            display: none;/* 设置display:none; 观察到该盒子消失，而且不占位置，*/
        }
        .box4{
            width: 200px;
            height: 200px;
            background: #abb155;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
</body>
</html>