現(xiàn)在的網(wǎng)頁設(shè)計(jì)越來越動(dòng)態(tài)化，我們經(jīng)常需要隱藏某些元素，在特定的時(shí)候才顯示它們。我們通?？梢允褂?種方法來隱藏和顯示元素。
現(xiàn)在的網(wǎng)頁設(shè)計(jì)越來越動(dòng)態(tài)化，我們經(jīng)常需要隱藏某些元素，在特定的時(shí)候才顯示它們。我們通常可以使用4種方法來隱藏和顯示元素。
這4種顯示和隱藏元素的技術(shù)各自有它們自己的優(yōu)點(diǎn)的缺點(diǎn)，下面來舉例說明。
在這篇文章中，我們將使用下面的HTML代碼和CSS樣式來講解著4種隱藏元素的技術(shù)。
<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是許多人在隱藏某個(gè)HTML元素時(shí)的首選。如右圖所示，圖片不見了，但是也沒中原來圖片的位置留下了一片空白區(qū)域。這個(gè)屬性只是簡(jiǎn)單的隱藏某個(gè)元素，但是元素占用的空間任然存在。
設(shè)置visibility: visible可以使隱藏的元素變?yōu)榭梢姟?div style="height:15px;">
OPACITY: 0
img#dice { float: right; margin-left: 2em; opacity: 0; }
這是一個(gè)
CSS3屬性，設(shè)置opacity: 0可以使一個(gè)元素變得完全透明，從而制作出和visibility: hidden一樣的效果。opacity和visibility相比，其優(yōu)勢(shì)在于它可以被transition和animate。
通?？梢允褂胦pacity屬性來制作元素的淡入淡出效果。
設(shè)置opacity:1可以使透明元素變得可見。
POSITION: ABSOLUTE
img#dice { position: absolute; left: -1000px; }
最古老和最標(biāo)準(zhǔn)的做法是設(shè)置元素的絕對(duì)定位來隱藏元素。這種技術(shù)使元素脫離文檔流，處于普通文檔之上，并給它設(shè)置一個(gè)很大的left負(fù)值定位，使元素定位在可見區(qū)域之外。float和margin都不能影響到position: absolute的元素，因此它們可以很好的被隱藏起來。
在制作一些元素的直線動(dòng)畫時(shí)，使用這種技術(shù)是最好的方法。
要使元素再次變得可見，可以增大left的值，使元素出現(xiàn)在屏幕上。
DISPLAY: NONE
img#dice { display: none; }
display: none也是一個(gè)非常老的技術(shù)，它是position: absolute和visibility: hidden;的折中方法，元素會(huì)變得不可見，并且不會(huì)再占用文檔的空間。
display: none在制作手風(fēng)琴效果時(shí)十分有用。
將元素設(shè)置為display: block或其它值可以使元素再次可見。
除了上面描述的4種方法之外，還有其它方法可以隱藏元素，特別是使用CSS3的時(shí)候。例如：你可以使用scale屬性來減少元素的尺寸直到它消失。但是scale屬性和opacity: 0和visibility: hidden一樣，不可見的元素會(huì)占用文檔的空間。
