display和visibility的区别
display和visibility在功能上都是实现元素的隐藏和显示，但是在效果上有本质区别。
display：none表示隐藏，display：block表示显示。
visibility：hidden表示隐藏，visibility：visible表示显示。
这两个属性在显示上没有什么区别，但是在隐藏上就有效果上的差别：
display：none在隐藏是会删除原来占用的空间，他后边元素的位置会发生变化。
但是visibility：hidden在隐藏的时候就不会隐藏原有的空间不会影响他后边元素的位置。
下边是两种情况下的效果图。
display：none效果：
html代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div>观看display的隐藏效果</div> <p>点击上一行</p> </body> <script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="js/touch.js" ></script> </html>
js代码：
$(function(){
$("div").click(function(){
$("div").css("display","none")
})
})
效果图如下：
visibility：visible效果：
html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div>观看display的隐藏效果</div> <p>点击上一行</p> </body> <script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="js/touch.js" ></script> </html>
js代码：
$(function(){
$("div").click(function(){
$("div").css("visibility","hidden")
})
})
效果图如下：
以上就是display隐藏与visibility隐藏的区别。
