visibility和display的区别

visibility:hidden;和display:none;都可以使得元素消失在当前视野中，但是两者的区别是什么？

• 我们都知道，当为元素设置display:none;时，元素在页面中不占据任何位置，而visibility:hidden;时，元素依旧占据位置，如图所示，页面中只显示了visibility为hidden的元素；
  

• 对子元素的影响
  父元素为display:none;时，子元素设置display:block;无效
  父元素为visibility:hidden;时，子元素设置visibility:visible;元素再次显示

• 不管设置哪个，如果子元素为图片的时候，都会请求图片