一般在面試中問display:none和visibility:hidden兩者區別，面試者都能回答出：兩者都是隱藏元素，前者不會占據空間，后者隱藏了依然占據空間。記錄這篇博客，想能夠更深入或者更全面比較兩者區別。
visibility:隱藏對應的元素但不擠占該元素原來的空間。
display:隱藏對應的元素並且擠占該元素原來的空間。
兩者區別：
- visibility具有繼承性，給父元素設置visibility:hidden;子元素也會繼承這個屬性。但是如果重新給子元素設置visibility: visible,則子元素又會顯示出來。這個和display: none有着質的區別
- visibility: hidden不會影響計數器的計數，如圖所示，visibility: hidden雖然讓一個元素不見了，但是其計數器仍在運行。這和display: none完全不一樣
- visibility用來設置元素的可見狀態。
- display:none是會有回流，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”。
- visibility: hidden; 不會有回流，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>display:none和visibility:hidden兩者的區別</title> 9 </head> 10 11 <body> 12 <div> 13 <strong>給元素設置visibility:hidden樣式</strong> 14 <ol> 15 <li>元素1</li> 16 <li style="visibility:hidden;">元素2</li> 17 <li>元素3</li> 18 <li>元素4</li> 19 </ol> 20 </div> 21 <div> 22 <strong>給元素設置display:none樣式</strong> 23 <ol> 24 <li>元素1</li> 25 <li style="display:none;">元素2</li> 26 <li>元素3</li> 27 <li>元素4</li> 28 </ol> 29 </div> 30 31 <strong>給元素設置visibility:hidden繼承屬性樣式</strong> 32 <div style="visibility:hidden"> 33 <ol> 34 <li>元素1</li> 35 <li style="visibility:visible;">元素2</li> 36 <li>元素3</li> 37 <li>元素4</li> 38 </ol> 39 </div> 40 </body> 41 42 </html>
語法：
visibility : inherit | visible | collapse | hidden
參數可參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/visibility
display用來設定元素的顯示狀態。
語法：
display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-
group | table-header-group | table-row | table-row-group
參數：
block : CSS1 塊對象的默認值。用該值為對象之后添加新行
none : CSS1 隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間
inline : CSS1 內聯對象的默認值。用該值將從對象中刪除行
compact : CSS2 分配對象為塊對象或基於內容之上的內聯對象
marker : CSS2 指定內容在容器對象之前或之后。要使用此參數，對象必須和:after及:before 偽元素一起使用
inline-table : CSS2 將表格顯示為無前后換行的內聯對象或內聯容器
list-item : CSS1 將塊對象指定為列表項目。並可以添加可選項目標志
run-in : CSS2 分配對象為塊對象或基於內容之上的內聯對象
table : CSS2 將對象作為塊元素級的表格顯示
table-caption : CSS2 將對象作為表格標題顯示
table-cell : CSS2 將對象作為表格單元格顯示
table-column : CSS2 將對象作為表格列顯示
table-column-group : CSS2 將對象作為表格列組顯示
table-header-group : CSS2 將對象作為表格標題組顯示
table-footer-group : CSS2 將對象作為表格腳注組顯示
table-row : CSS2 將對象作為表格行顯示
table-row-group : CSS2 將對象作為表格行組顯示
運用總結：
- 若用JQeury中的Show()來顯示元素，則只對display:none有效，對於用visibility:hidden方式隱藏的元素是無效的
- display:none和visibility:hidden都是隱藏元素而不是刪除元素。