如果想讓某一段代碼在前台不顯示，最簡單的方法是用css的display:none即可，這樣下邊的內容就自動上移或右側的左移來填補這個空隙。但特殊情況下我們只需要隱藏這個元素，
但它的位置不能被占了，那該怎么實現呢？接下來我們來看css的另外一個屬性Visibility屬性。
visibility:隱藏對應的元素但不擠占該元素原來的空間。
display:隱藏對應的元素並且擠占該元素原來的空間。
來看看下面的這個例子：
下面來看visibility和dispaly的一些參數
visibility用來設置元素的可見狀態。
語法：
visibility : inherit | visible | collapse | hidden
參數：
inherit : 繼承上一個父對象的可見性
visible : 對象可視
hidden : 對象隱藏
collapse : 主要用來隱藏表格的行或列。隱藏的行或列能夠被其他內容使用。對於表格外的其他對象，其作用等同於hidden。IE5.5尚不支持此屬性。
說明：
設置或檢索是否顯示對象。與display屬性不同，此屬性為隱藏的對象保留其占據的物理空間。
如果希望對象為可視，其父對象也必須是可視的。
對應的腳本特性為visibility。請參閱我編寫的其他書目。
display用來設定元素的顯示狀態。
語法：
display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-
group | table-header-group | table-row | table-row-group
參數：
block : CSS1 塊對象的默認值。用該值為對象之后添加新行
none : CSS1 隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間
inline : CSS1 內聯對象的默認值。用該值將從對象中刪除行
compact : CSS2 分配對象為塊對象或基於內容之上的內聯對象
marker : CSS2 指定內容在容器對象之前或之后。要使用此參數，對象必須和:after及:before 偽元素一起使用
inline-table : CSS2 將表格顯示為無前后換行的內聯對象或內聯容器
list-item : CSS1 將塊對象指定為列表項目。並可以添加可選項目標志
run-in : CSS2 分配對象為塊對象或基於內容之上的內聯對象
table : CSS2 將對象作為塊元素級的表格顯示
table-caption : CSS2 將對象作為表格標題顯示
table-cell : CSS2 將對象作為表格單元格顯示
table-column : CSS2 將對象作為表格列顯示
table-column-group : CSS2 將對象作為表格列組顯示
table-header-group : CSS2 將對象作為表格標題組顯示
table-footer-group : CSS2 將對象作為表格腳注組顯示
table-row : CSS2 將對象作為表格行顯示
table-row-group : CSS2 將對象作為表格行組顯示
說明：
設置或檢索對象是否及如何顯示。
目前 IE5.5僅支持以上CSS1的參數。
以上是CSS官方給出的解釋。對於這兩個css屬性來說，很多人都分不清楚這兩個屬性，尤其是其在功能上有部分重疊的地方，並且從定義中來看，元素的顯示狀態和元素的可見狀態概念上的區別很不明顯。
visibility和display兩個屬性都有隱藏元素的功能。
但使用visibility屬性並不能減少瀏覽器打開網頁的速度，就是說visibility屬性所控制的元素雖然不在瀏覽器里面顯示出來，但他在瀏覽區里是存在的，瀏覽器打開網頁的時候已經下載了這個元素，只是不顯示而已。
並且這個元素在瀏覽器顯示的頁面中也要占他本身大小的位置，而這個位置顯示的是空白而已。
而display屬性設置為none，這個元素就變成了一個不顯示的元素，瀏覽器在載入網頁的時候會忽略這個元素，不會下載其內容，瀏覽器打開速度會比沒有設置display屬性前要快。
總結
使用CSS display:none屬性后，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”;
而使用visibility:hidden屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在。
CSS display:none和visibility:hidden的區別
visibility:hidden隱藏，但在瀏覽時保留位置；CSS display:none視為不存在，且不加載！
Overflow屬性值{visible|hidden|scroll|auto}前提是先要限制DIV的寬度（width）和高度（height）。二者都是隱藏HTML元素，在視覺效果上沒有區別，但在一些DOM操作中二者還是有所不同的。
CSS display:none;
使用該屬性后，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”;
visibility:hidden;
使用該屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。
注：若用JQeury中的Show()來顯示元素，則只對display:none有效，對於用visibility:hidden方式隱藏的元素是無效的