1 <html> 2 <head> 3 <title>顯示和隱藏問題</title> 4 <meta charset="utf-8"/> 5 <style type="text/css"> 6 #a{ 7 width: 500px; 8 height: 300px; 9 background-color: red; 10 /*display:none;*/ 11 visibility:hidden; 12 } 13 #b{ 14 width: 100px; 15 height: 200px; 16 background-color: green; 17 display:block; 18 /*display:none;*/ 19 visibility: hidden; 20 } 21 #c{ 22 width: 100px; 23 height: 200px; 24 background-color: blue; 25 } 26 </style> 27 </head> 28 <body> 29 <div id="a">a 30 <div id="b">b</div> 31 <div id="c">c</div> 32 </div> 33 </body> 34 </html>
display:none;和visibility: hidden;都可以隱藏元素。區別是display:none徹底不顯示元素，元素不占空間，跟完全沒有一樣。visibility: hidden只是把元素隱藏不顯示，但還是占有原來的位置空間的。
另：如果父div設置為隱藏屬性，則其孩子也都被隱藏。（然后想單獨設置孩子顯示，也顯示不出來，目前測試是這樣）