display: none和visibility: hidden的区别

dispaly:none 设置该属性后，该元素下的元素都会隐藏，占据的空间消失
visibility:hidden 设置该元素后，元素虽然不可见了，但是依然占据空间的位置

<!-- html -->
<div>测试测试测试测试测试</div>
<div class="test">改样式</div>
<div>测试测试测试测试测试</div>

/*css*/
.test{
  background-color: pink;
}

为test类设置以上两个属性后,显示分别为: