现在的网页设计越来越动态化,我们经常需要隐藏某些元素,在特定的时候才显示它们。我们通常可以使用4种方法来隐藏和显示元素。
css如何去掉html元素
css无法将html元素完全的从页面中去除,但是可以通过一些方法让它们在视觉上隐藏掉。具体的做法是设置元素css属性display:none和visibility:hidden等属性。
一、visibility: hidden
visibility: hidden是许多人在隐藏某个HTML元素时的首选。这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在。div{
visibility: hidden;
}
与之相对的属性:visibility: visible 可以使隐藏的元素变为可见。(推荐学习:CSS视频教程)
二、opacity: 0div{
opcity: 0;
}
这是一个CSS3属性,设置opacity: 0可以使一个元素变得完全透明,从而制作出和visibility: hidden一样的效果。opacity和visibility相比,其优势在于它可以被transition和animate。
通常可以使用opacity属性来制作元素的淡入淡出效果。
与之相对的属性:opacity:1可以使透明元素变得可见。
三、position: absolutediv {
position: absolute; left: -1000px;
}
最古老和最标准的做法是设置元素的绝对定位来隐藏元素。这种技术使元素脱离文档流,处于普通文档之上,并给它设置一个很大的left负值定位,使元素定位在可见区域之外。float和margin都不能影响到position: absolute的元素,因此它们可以很好的被隐藏起来。
在制作一些元素的直线动画时,使用这种技术是最好的方法。
要使元素再次变得可见,可以增大left的值,使元素出现在屏幕上。
四、display: nonediv{
display: none;
}
display: none也是一个非常老的技术,它是position: absolute和visibility: hidden; 的折中方法,元素会变得不可见,并且不会再占用文档的空间。
display: none在制作手风琴效果时十分有用。
与之相对的属性:display: block或其它值可以使元素再次可见。
除了上面描述的4种方法之外,还有其它方法可以隐藏元素,特别是使用CSS3的时候。例如:你可以使用scale属性来减少元素的尺寸直到它消失。但是scale属性和opacity: 0和visibility: hidden一样,不可见的元素会占用文档的空间。