[CSS] display:none和visibility:none的差別

前言

在使用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屬性來實現的