display: none 和 visibility: hidden 的区别
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .big {margin: 20px auto;background-color: darkseagreen;} .big div {width: 200px;height: 200px;float: left;margin: 20px;background-color: burlywood;} </style> </head> <body> <div class="big"> <div>1</div> <div style="display: none;">2 display: none;</div> <div>3</div> <div>4</div> </div> <div style="clear: both;"></div> <div class="big"> <div>1</div> <div style="visibility: hidden;">2 visibility: hidden;</div> <div>3</div> <div>4</div> </div> </body> </html>
隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。