display:none; 和 visibility:hidden 的區別
看了張鑫旭老師的 《CSS世界》一書，對 display:none 和 visibility:hidden 的區別整理如下：
display:none
- 隱藏 display: none 是真正意義上的隱藏，當一個元素設置了此屬性，則其後代子元素都隱藏
- 佔位 display: none 設置的元素是不佔位的
- transition 過渡的影響 display:none 不會對 animation 動畫造成影響，但是會影響 transition 的過渡效果
- 對計數器的影響 列表中如果某個元素設置了 display:none 則該元素不加入計數隊列
- 資源的加載 在 FF 瀏覽器下，display:none 的元素的 background-image 圖片資源是不加載的，包括父元素 display:none 也是如此；chrome 和 safari 瀏覽器，則要分情況，若父元素 display: none，圖片不加載，若本身背景圖所在元素 display:none 則圖片依舊會去加載；IE 瀏覽器，無論怎樣都會請求圖片資源
visibility:hidden
- 隱藏 visibility: hidden 的隱藏是因爲繼承隱藏的，當一個元素設置了此屬性，其後代子元素是因爲繼承了該屬性纔會隱藏的，當後代子元素設置了 visibility: visible ，後代子元素會顯示
- 佔位 visibility:hidden 設置的元素是佔位的
- transition 過渡的影響 visibility:hidden 不會影響 transition 的過渡效果
- 對計數器的影響 列表中如果某個元素設置了 visibility:hidden 則該元素依然加入計數隊列，visibility:hidden 不會影響計數器的計數