首先看看兩者在mdn上的解釋:
visibility: visible | hidden | collapse | inherit
visible: 元素正常顯示.
hidden: 隱藏元素,但是其他元素的布局不改變.相當(dāng)于此元素變成透明
collapse: 暫時(shí)沒用過,以后用到了再補(bǔ)充.
默認(rèn)值是visible, 是繼承屬性:意味著我們給父元素設(shè)置visibility: hidden,則子元素繼承該屬性,表現(xiàn)為隱藏,符合我們的預(yù)期.
display: none | inline | block | flex ....
display 屬性指定用于元素的呈現(xiàn)框的類型,元素默認(rèn)的display屬性取決于html規(guī)范中所描述的行為或?yàn)g覽器的默認(rèn)樣式表.
比較特別的是display: none,聲明了該屬性的元素包括其子元素都不會被瀏覽器渲染.即元素節(jié)點(diǎn)"不存在".

區(qū)別

1. 首先是布局上: visibility:hidden 占用布局,display:none不會占用頁面布局.
2. visibility: hidden是可以被過渡的屬性(與transition配合使用).
   看例子:

.foo {
  background-color: orange;
  width: 100px;
  height: 100px;
  border: 1px solid;
  transition: all 0.5s ease-in;
  visibility: visible;
}

.foo:hover {
  visibility: hidden;
}

元素會在0.5s后隱藏.可以將它與opacity屬性做類比: visible等價(jià)于1, hidden等價(jià)于0,當(dāng)值為0時(shí)元素隱藏.

相同點(diǎn)

visibility:hidden的元素?zé)o法捕獲點(diǎn)擊等事件(與display: none相同)

一個(gè)用于二級導(dǎo)航的例子:

.menu-item-has-children:hover .sub-menu {
  visibility: visible;
  opacity: 1;
}
.sub-menu {
  transition: all 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

這里給二級導(dǎo)航欄添加了漸隱效果,同時(shí)為了防止二級導(dǎo)航欄隱藏以后依然可點(diǎn)擊,于是添加了visibility屬性過渡.

opacity: 0 時(shí)元素依然可以捕獲點(diǎn)擊事件! 此時(shí)只是元素變透明而已