visibility:隐藏对应的元素但不挤占该元素原来的空间。
display:隐藏对应的元素并且挤占该元素原来的空间。
对于这两个css属性来说，很多人都分不清楚这两个属性，尤其是其在功能上有部分重叠的地方，并且从定义中来看，元素的显示状态和元素的可见状态概念上的区别很不明显。
visibility和display两个属性都有隐藏元素的功能。
但使用visibility属性并不能减少浏览器打开网页的速度，就是说visibility属性所控制的元素虽然不在浏览器里面显示出来，但他在浏览区里是存在的，浏览器打开网页的时候已经下载了这个元素，只是不显示而已。并且这个元素在浏览器显示的页面中也要占他本身大小的位置，而这个位置显示的是空白而已。
而display属性设置为none，这个元素就变成了一个不显示的元素，浏览器在载入网页的时候会忽略这个元素，不会下载其内容，浏览器打开速度会比没有设置display属性前要快。
两对隐藏与显示分别是
display:none和display:block
visibility: hidden和visibility: visible
今天在做一个小button时候,要做的一个功能是当点击这个按钮时,从按钮的中间位置要向外延伸出一个涟漪,所以这个中间这个准备发出涟漪的小块就在没有点击时不能出现,第一次想法是用display:none来做,当点击时候display:block,后来发现这样做的话点击之后直接会出来最终的效果,没有动画做出涟漪的效果,于是换成了visibility:hidden和visibility:visible,这时候就会出现预期的效果.
