首先先寫個(gè)代碼試下：

 <button class="btn1" style="display:none">按鈕display</button>
    <button class="btn2" style="visibility:hidden">按鈕visibility</button>
    <button class="btn3" style="opacity:0">按鈕opacity</button>     

三個(gè)按鈕，分別設(shè)置其屬性為display: none， opacity: 0，visibility: hidden，實(shí)現(xiàn)按鈕的隱藏。然后打開瀏覽器，審查元素，我們會(huì)發(fā)現(xiàn)，display為none的元素，不占位置，其他兩個(gè)元素還是占位置的。

image.png

image.png

image.png

第二點(diǎn)是關(guān)于事件的處理，給每個(gè)按鈕都添加點(diǎn)擊事件。

   <button class="btn1" style="display:none" onclick="alert('display')">按鈕display</button>
    <button class="btn2" style="visibility:hidden"  onclick="alert('visibility')">按鈕visibility</button>
    <button class="btn3" style="opacity:0"  onclick="alert('opacity')">按鈕opacity</button>     

測(cè)試發(fā)現(xiàn)，只有opacity的情況，按鈕的點(diǎn)擊事件是還可以觸發(fā)的。

第三點(diǎn)，我們把元素的類別換一下，看一下他們對(duì)子類元素的影響。

<div class="btn1" style="display:none" onclick="alert('display')">按鈕display
        <span style="display: block">im display</span>
    </div>
    <div class="btn2" style="visibility:hidden" onclick="alert('visibility')">按鈕visibility
        <span style="visibility:visible;">im visibility</span>
    </div>
    <div class="btn3" style="opacity:0" onclick="alert('opacity')">按鈕opacity
        <span style="opacity: 100%;">im opacity</span>
    </div>

image.png

通過(guò)給子元素的設(shè)置相反的屬性，只有visibility的子元素可以顯示。

收集到大神的回復(fù)如下：

display: none;
DOM 結(jié)構(gòu)：瀏覽器不會(huì)渲染 display 屬性為 none 的元素，不占據(jù)空間；
事件監(jiān)聽：無(wú)法進(jìn)行 DOM 事件監(jiān)聽；
性能：動(dòng)態(tài)改變此屬性時(shí)會(huì)引起重排，性能較差；
繼承：不會(huì)被子元素繼承，畢竟子類也不會(huì)被渲染；
transition：transition 不支持 display。
visibility: hidden;
DOM 結(jié)構(gòu)：元素被隱藏，但是會(huì)被渲染不會(huì)消失，占據(jù)空間；
事件監(jiān)聽：無(wú)法進(jìn)行 DOM 事件監(jiān)聽；
性 能：動(dòng)態(tài)改變此屬性時(shí)會(huì)引起重繪，性能較高；
繼 承：會(huì)被子元素繼承，子元素可以通過(guò)設(shè)置 visibility: visible; 來(lái)取消隱藏；
transition：transition 不支持 display。
opacity: 0;
DOM 結(jié)構(gòu)：透明度為 100%，元素隱藏，占據(jù)空間；
事件監(jiān)聽：可以進(jìn)行 DOM 事件監(jiān)聽；
性 能：提升為合成層，不會(huì)觸發(fā)重繪，性能較高；
繼 承：會(huì)被子元素繼承,且，子元素并不能通過(guò) opacity: 1 來(lái)取消隱藏；
transition：transition 不支持 opacity。