CSS中display和visibility的区别

今天看寻寻觅觅某一网站的漏洞，看到setStyle({display:'none'})，顺便了解了一下页面隐藏CSS样式display和visibility的区别：
总的来说，基本上所有的浏览器都支持display:none、display:inline、display:block和visibility:visible、visibility:hidden等几个样式。他们之间有什么不一样呢？

带有display:none样式的元素和带有visibility:hidden样式的元素在页面上的表现都一样，都是看不到的。但带有 display:none样式的元素，是不占地方的，而带有visibility:hidden样式的元素却会占地方。参考一下下面的例子就知道了：

<div id="divTest" style="background-color: green;">This is only for test!</div>
<input type="button" value="display:none" onclick="document.getElementById('divTest').style.display='none';" />
<input type="button" value="display:block" onclick="document.getElementById('divTest').style.display='block';" />
<input type="button" value="visibility:hidden" onclick="document.getElementById('divTest').style.visibility='hidden';" />
<input type="button" value="visibility:visible" onclick="document.getElementById('divTest').style.visibility='visible';" />

效果如下：点击第一个按钮绿条消失并自动缩进，而点击第三个按钮绿条消失后不会自动缩进。