display:none和visibility:hidden的差
前言：在使用css隐藏栏位或物件的时候，常常会使用到display:none和visibility:hidden这两个属性，但却很容易分不清楚这两个的差别，或是乾脆同时使用两种属性，来确保物件一定被隐藏，其实我们可以很简单的来区分两者的差别。 实际演练 首先，我们先拉出一个Table如下， <table id="table1"> <tr> <td>1 </td> <td>2 </td> </tr> <tr> <td>3 </td> <td>4 </td> </tr> </table> 执行后看起来会像这样子
1234 首先我们替第二行的 tr 加上 style="visibility:hidden"
<tr style="visibility:hidden">
可以发现我们的Table会变成这样
12

所以当使用 visibility:hidden 时，物件是确实的被隐藏的，但物件的位置仍旧保持著不会消失 再来我们将第二行的tr改成 style="display:none"<tr style="display:none">我们的Table会变成
12可以看到第二行连空白也消失了，所以当使用 style="display:none" 时， 物件连原本所在的位置都一起被隐藏了 总结：若我们需要把一个物件完全的隐藏，那我们应该要使用 display:none ，它可以将物件连同所在位置一起隐藏，就好像真的在网页上完全消失了，而实际上JQuery的hide及show也是在透过操作display属性来实现的，所以当需要在网页上预设某些物件是隐藏时，不需要透过jquery一个一个的去写
1$(物件).hide();

原文：http://www.software8.co/wzjs/cssdiv/1827.html