如何使用CSS隐藏HTML元素?隐藏HTML元素的四种方法

不言
Lepaskan: 2018-07-21 18:01:37
asal
1955 orang telah melayarinya

如今的网页设计是变得越来越动态化,有时候我们可能需要隐藏某些元素,在需要的时候才将它们显示出来。而我们常用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>
Salin selepas log masuk

基本的CSS样式如下:

img#dice { float: right; margin-left: 2em; }
Salin selepas log masuk

visibility: hidden

img#dice { float: right; margin-left: 2em; visibility: hidden; }
Salin selepas log masuk

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; }
Salin selepas log masuk

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; }
Salin selepas log masuk

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

最古老和最标准的做法是设置元素的绝对定位来隐藏元素。这种技术使元素脱离文档流,处于普通文档之上,并给它设置一个很大的left负值定位,使元素定位在可见区域之外。floatmargin都不能影响到position: absolute的元素,因此它们可以很好的被隐藏起来。

在制作一些元素的直线动画时,使用这种技术是最好的方法。

要使元素再次变得可见,可以增大left的值,使元素出现在屏幕上。

display: none
img#dice { display: none; }
Salin selepas log masuk

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技巧

Atas ialah kandungan terperinci 如何使用CSS隐藏HTML元素?隐藏HTML元素的四种方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!