visibility:hidden和display: none的区别

1、首先写一个HTML页面，在HTML中写一个表格，表格中有两个tr，也就是两行

2、可以看到页面显示效果如下图所示

3、给表格的第二个tr添加属性style="display: none;"

4、可以看到页面显示效果如下图所示，可以看到隐藏后tr所对应的区域也隐藏了，也就是元素不占据任何空间

5、给表格的第二个tr添加属性style="visibility:hidden;"

6、可以看到页面显示效果如下图所示，可以看到visibility: hidden隐藏后的元素空间依然存在，也就是说虽然元素不可见了，但是仍然会影响页面的布局