display:none visibility:hidden 之间的区别

一，display:none;
隐藏元素，不占网页中的任何空间，让这个元素彻底消失；将元素的显示设为无，即在网页中不占任何的位置，浏览器在载入网页的时候会忽略这个元素，不会下载其内容，浏览器打开速度会比没有设置display属性前要快；HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;
display: none; 不占据空间，无法点击。
二，visibility:hidden;
把那个层隐藏了，在网页中该占的位置还是占着，也就是你看不到它的内容但是它内容所占据的空间还是存在的，visibility属性并不能减少浏览器打开网页的速度，它在浏览区里是存在的，浏览器打开网页的时候已经下载了这个元素，只是不显示而已，并且在浏览器显示的页面中也要占他本身大小的位置，而这个位置显示的是空白而已，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
visibility: hidden; 占据空间，无法点击