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设置为隐藏属性，则其孩子也都被隐藏。（然后想单独设置孩子显示，也显示不出来，目前测试是这样）