首頁 > web前端 > css教學 > 主體

如何使用CSS隱藏HTML元素?隱藏HTML元素的四種方法

不言
發布: 2018-07-21 18:01:37
原創
1955 人瀏覽過

如今的網頁設計是變得越來越動態化,有時候我們可能需要隱藏某些元素,在需要的時候才將它們顯示出來。而我們常用css隱藏HTML元素有四種方式,這四種顯示和隱藏元素的技術各自有它們自己的優點的缺點,以下來舉例說明。

在這篇文章中,我們將使用下面的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; }
登入後複製

Layout of image and text with visibility set to hidden on an image

## visibility: hidden是許多人在隱藏某個HTML元素時的首選。如右圖所示,圖片不見了,但是也沒中原來圖片的位置留下了一片空白區域。這個屬性只是簡單的隱藏某個元素,但是元素所佔用的空間卻任然存在。

設定

visibility: visible可以使隱藏的元素變成可見。

opacity: 0
img#dice { float: right; margin-left: 2em; opacity: 0; }
登入後複製

Layout of image and text with opacity set to 0 on an image

#這是CSS3屬性,設定

opacity: 0可以使一個元素變得完全透明,從而製作出和visibility: hidden一樣的效果。 opacityvisibility相比,其優勢在於它可以被transitionanimate

通常可以使用

opacity屬性來製作元素的淡入淡出效果。

設定

opacity:1可以讓透明元素變得可見。

position: absolute
img#dice { position: absolute; left: -1000px; }
登入後複製

Layout of image and text with position set to absolute on an image

#最古老且最標準的做法是設定元素的絕對定位來隱藏元素。這種技術使元素脫離文檔流,處於普通文檔之上,並給它一個很大的

left負值定位,使元素定位在可見區域之外。 floatmargin都不能影響到position: absolute的元素,因此它們可以很好的被隱藏起來。

在製作一些元素的直線動畫時,使用這種技術是最好的方法。

要讓元素再次變得可見,可以增大

left的值,使元素出現在螢幕上。

display: none
img#dice { display: none; }
登入後複製

Layout of image and text with display set to none on an image

#display: none也是非常老的技術,它是position: absolutevisibility: hidden; #的折法,元素會變得不可見,並且不會再佔用文件的空間。

display: none在製作手風琴效果時十分有用。

將元素設定為

display: block或其它值可以讓元素再次可見。

除了上面描述的4種方法之外,還有其它方法可以隱藏元素,特別是使用CSS3的時候。例如:你可以使用

scale屬性來減少元素的尺寸直到它消失。但是scale屬性和opacity: 0visibility: hidden一樣,看不見的元素會佔用文件的空間。

相關建議:

HtmL的元素有哪幾種隱藏方式

javascript 控制 html元素 顯示/隱藏實作碼_javascript技巧

以上是如何使用CSS隱藏HTML元素?隱藏HTML元素的四種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!