1、display：none；

• DOM結構：瀏覽器不會渲染display屬性為none的元素，不占據空間，意思就是頁面上沒有它的一席之地，你在開發者模式中選不中那個元素。
• 事件監聽：無法進行DOM事件監聽。
• 性能：動態改變此屬性時會引起重排，性能較差。
• 繼承：不會被子元素繼承，因為子元素也不被渲染。
• transtion過渡不支持display。

2.、visibility：hidden；

• DOM結構：元素被隱藏了，瀏覽器會渲染visibility屬性為hidden的元素，占據空間，意思就是頁面上有它的空間，在開發者模式中能選中那個元素。
• 事件監聽：無法進行DOM事件監聽。
• 性能：動態改變此屬性時會引起重繪，性能較高。
• 繼承：會被子元素繼承，子元素通過設置visibility:visible;來顯示自身，使子元素取消自身隱藏。
• transtion：visibility會立即顯示，隱藏時會延時。

3.、opacity：0；

• DOM結構：opacity屬性值為0時透明度為100%，元素隱藏，占據空間，opacity值為0到1，為1時顯示元素。
• 事件監聽：可以進行DOM事件監聽。
• 性能：提升為合成層，不會引發重繪，性能較高。
• 繼承：會被子元素繼承，子元素不能通過設置opacity:1;來取消隱藏。。
• transtion：opacity可以延時顯示與隱藏。

說明：不會引發重排，一般情況下也會引發重繪，但是配合tansition、animation等使用不會觸發重繪

如果利用 animation 動畫，對 opacity 做變化（animation會默認觸發GPU加速），則只會觸發 GPU 層面的 composite，不會觸發重繪

關于display: none、visibility: hidden、opacity: 0的區別，如下表所示：

display: nonevisibility: hiddenopacity: 0

頁面中	不存在	存在	存在
重排	會	不會	不會
重繪	會	會	不一定
自身綁定事件	不觸發	不觸發	可觸發
transition	不支持	支持	支持
子元素可復原	不能	能	不能
被遮擋的元素可觸發事件	能	能	不能

其他隱藏元素方法：基本不會用

1、將元素的margin，border，padding，height和width等影響元素盒模型的屬性設置成0，如果元素內有子元素或內容，還應該設置其overflow:hidden來隱藏其子元素

.hiddenBox {margin:0; border:0;padding:0;height:0;width:0;overflow:hidden; }

特點：元素不可見，不占據頁面空間，無法響應點擊事件

position:absolute

將元素移出可視區域

.hide {position: absolute;top: -9999px;left: -9999px; }

特點：元素不可見，不影響頁面布局

clip-path

通過裁剪的形式

.hide {clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); }

特點：元素不可見，占據頁面空間，無法響應點擊事件

總結

以上是生活随笔為你收集整理的display、visibility和opactity的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。