display:none跟visibility:hidden的差別

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

查看更多 下一篇