| 方法 | 表現(xiàn) |
|---|---|
| display: none | 渲染樹不會(huì)包含該渲染對(duì)象魂迄，因此該元素不會(huì)在頁面中占據(jù)位置吼旧，也不會(huì)響應(yīng)綁定的監(jiān)聽事件畜眨。 |
| visibility: hidden | 元素在頁面中仍占據(jù)空間乘陪，但是不會(huì)響應(yīng)綁定的監(jiān)聽事件。 |
| opacity: 0 | 將元素的透明度設(shè)置為 0奄容，以此來實(shí)現(xiàn)元素的隱藏冰更。元素在頁面中仍然占據(jù)空間产徊，并且能夠響應(yīng)元素綁定的監(jiān)聽事件。 |
| position: absolute | 通過使用絕對(duì)定位將元素移除可視區(qū)域內(nèi)冬殃，以此來實(shí)現(xiàn)元素的隱藏囚痴。 |
| z-index: 負(fù)值 | 來使其他元素遮蓋住該元素，以此來實(shí)現(xiàn)隱藏审葬。 |
| clip/clip-path | 使用元素裁剪的方法來實(shí)現(xiàn)元素的隱藏，這種方法下奕谭，元素仍在頁面中占據(jù)位置涣觉，但是不會(huì)響應(yīng)綁定的監(jiān)聽事件。 |
| transform: scale(0,0) | 將元素縮放為 0血柳，來實(shí)現(xiàn)元素的隱藏官册。這種方法下，元素仍在頁面中占據(jù)位置难捌，但是不會(huì)響應(yīng)綁定的監(jiān)聽事件膝宁。 |
display:none與visibility:hidden的區(qū)別：
1、在渲染樹中
- display:none會(huì)讓元素完全從渲染樹中消失根吁，渲染時(shí)不會(huì)占據(jù)任何空間员淫；
- visibility:hidden不會(huì)讓元素從渲染樹中消失，渲染的元素還會(huì)占據(jù)相應(yīng)的空間击敌，只是內(nèi)容不可見介返。
2、是否是繼承屬性
- display:none是非繼承屬性沃斤，子孫節(jié)點(diǎn)會(huì)隨著父節(jié)點(diǎn)從渲染樹消失圣蝎，通過修改子孫節(jié)點(diǎn)的屬性也無法顯示；
- visibility:hidden是繼承屬性衡瓶，子孫節(jié)點(diǎn)消失是由于繼承了hidden徘公，通過設(shè)置visibility:visible可以讓子孫節(jié)點(diǎn)顯示；
3哮针、修改常規(guī)文檔流中元素的 display 通常會(huì)造成文檔的重排关面，但是修改visibility屬性只會(huì)造成本元素的重繪；
4诚撵、使用讀屏器時(shí)缭裆，設(shè)置為display:none的內(nèi)容不會(huì)被讀取，設(shè)置為visibility:hidden的內(nèi)容會(huì)被讀取寿烟。
