• 聯系：它們都能讓元素不可見

• 區別：

  • display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續占據空間，只是內容不可見

  • display: none;是非繼承屬性，子孫節點消失由于元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示；visibility: hidden;是繼承屬性，子孫節點消失由于繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式

  • 修改常規流中元素的display通常會造成文檔重排。修改visibility屬性只會造成本元素的重繪。

  • 讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden;元素內容

display：none,整個標簽，內容都隱藏，visibility：hidden是只是內容隱藏