現在的網頁設計越來越動態化，我們經常需要隱藏某些元素，在特定的時候才顯示它們。我們通常可以使用4種方法來隱藏和顯示元素。
這4種顯示和隱藏元素的技術各自有它們自己的優點的缺點，下面來舉例說明。
在這篇文章中，我們將使用下面的HTML代碼和CSS樣式來講解着4種隱藏元素的技術。
<
p
>Dice used for traditional Dungeons ...</
p
>
<
img
src
=
"dice.jpg"
alt=”Photograph..."
id
=
"dice"
>
<
p
>The dice are used to determine...</
p
>
|
基本的CSS樣式如下：
img#dice {
float
:
right
;
margin-left
:
2em
; }
|
visibility: hidden
img#dice {
float
:
right
;
margin-left
:
2em
;
visibility
:
hidden
; }
|
visibility: hidden是許多人在隱藏某個HTML元素時的首選。如右圖所示，圖片不見了，但是也沒中原來圖片的位置留下了一片空白區域。這個屬性只是簡單的隱藏某個元素，但是元素占用的空間任然存在。
設置visibility: visible可以使隱藏的元素變為可見。
opacity: 0
img#dice {
float
:
right
;
margin-left
:
2em
;
opacity
:
0
; }
|
這是一個CSS3屬性，設置opacity: 0可以使一個元素變得完全透明，從而制作出和visibility: hidden一樣的效果。opacity和visibility相比，其優勢在於它可以被transition和animate。
通常可以使用opacity屬性來制作元素的淡入淡出效果。
設置opacity:1可以使透明元素變得可見。
position: absolute
img#dice {
position
:
absolute
;
left
:
-1000px
; }
|
最古老和最標准的做法是設置元素的絕對定位來隱藏元素。這種技術使元素脫離文檔流，處於普通文檔之上，並給它設置一個很大的left負值定位，使元素定位在可見區域之外。float和margin都不能影響到position: absolute的元素，因此它們可以很好的被隱藏起來。
在制作一些元素的直線動畫時，使用這種技術是最好的方法。
要使元素再次變得可見，可以增大left的值，使元素出現在屏幕上。
display: none
img#dice {
display
:
none
; }
|
display: none也是一個非常老的技術，它是position: absolute和visibility: hidden; 的折中方法，元素會變得不可見，並且不會再占用文檔的空間。
display: none在制作手風琴效果時十分有用。
將元素設置為display: block或其它值可以使元素再次可見。
除了上面描述的4種方法之外，還有其它方法可以隱藏元素，特別是使用CSS3的時候。例如：你可以使用scale屬性來減少元素的尺寸直到它消失。但是scale屬性和opacity: 0和visibility: hidden一樣，不可見的元素會占用文檔的空間。