此隨筆的靈感來源於上週的一個面試，在談到隱藏元素的時候，面試官突然問我【display: none】和【visibility: hidden】的區別，我當時一愣，這倆有區別嗎，好像有，但是忘記了啊，因爲平常基本都是用【display: none】，幾乎沒用過【visibility: hidden】，我只好如實回答。面試結束後回到家的第一件事就是敲代碼測試，下面就是測試過程及結果：
一、首先在頁面中放2個div，並用不同的背景色區分他們：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>兩種隱藏元素方式的區別</title> 6 <style type="text/css"> 7 div{ width: 100px; height: 100px; color: white; text-align: center; line-height: 100px; font-size: 40px;} 8 </style> 9 </head> 10 <body> 11 <div style="background: blue;>div1</div> 12 <div style="background: red;">div2</div> 13 </body> 14 </html>
二、給div1設置【display: none】：
<div style="background: blue; display: none">div1</div>
三、給div1的【display: none】換成【visibility: hidden】：
<div style="background: blue; visibility: hidden">div1</div>
四、總結：
【display: none】：隱藏元素及元素內的所有內容，並且該元素的位置、寬高等其他屬性值一併“消失”；
【visibility: hidden】：隱藏元素及元素內的所有內容，但是該元素的位置、寬高等屬性值仍然還在。