display:none 與 visibility:hidden 的區(qū)別

這兩個(gè)屬性都是讓元素隱藏，不可見(jiàn)。兩者區(qū)別如下：

（1）在渲染樹(shù)中

1.display:none會(huì)讓元素完全從渲染樹(shù)中消失，渲染時(shí)不會(huì)占據(jù)任何空間；

2.visibility:hidden不會(huì)讓元素從渲染樹(shù)中消失，渲染的元素還會(huì)占據(jù)相應(yīng)的空間，只是內(nèi)容不可見(jiàn)。

（2）是否是繼承屬性

1.display:none是非繼承屬性，子孫節(jié)點(diǎn)會(huì)隨著父節(jié)點(diǎn)從渲染樹(shù)消失，通過(guò)修改子孫節(jié)點(diǎn)的屬性也無(wú)法顯示；

2.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ì)被讀取。