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