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