這兩個屬性都是讓元素隱藏,不可見。兩者區別如下:
1、在渲染樹中
display:none會讓元素完全從渲染樹中消失,渲染時不會占據任何空間;visibility:hidden不會讓元素從渲染樹中消失,渲染的元素還會占據相應的空間,只是內容不可見。
2、是否是繼承屬性
display:none是非繼承屬性,子孫節點會隨著父節點從渲染樹消失,通過修改子孫節點的屬性也無法顯示;visibility:hidden是繼承屬性,子孫節點消失是由于繼承了hidden,通過設置visibility:visible可以讓子孫節點顯示;
3、修改常規文檔流中元素的 display 通常會造成文檔的重排,但是修改visibility屬性只會造成本元素的;
4、如果使用讀屏器,設置為display:none的內容不會被讀取,設置為visibility:hidden的內容會被讀取。