css隐藏元素的方式有哪些?隐藏一个元素有两种方法:display:none和visibility:hidden,但效果有所区别。
【例】创建两个div元素,浏览器显示效果如图1所示。代码如下。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .box1,.box2{ width: 100px; height: 100px; margin:100px; } .box1{ background-color:#b6d16a; } .box2{ background-color:#fbcd5d; } </style> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
图1 创建两个div元素
第一种方法:使用display:none将类名为box1的元素隐藏,效果如图2所示。CSS代码如下。
.box1{ background-color:#b6d16a; display: none; }
图2 使用display:none将类名为box1的元素隐藏
display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,某个元素不但被隐藏了,而且其原本占用的空间也会从页面布局中消失。
第二种方法:使用visibility:hidden将类名为box1的元素隐藏,效果如图3所示。CSS代码如下。
.box1{ background-color:#b6d16a; visibility:hidden; }
图3 使用visibility:hidden将类名为box1的元素隐藏
visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,某个元素虽然被隐藏了,但仍然存在于页面上。
display:none隐藏对应的元素但不挤占该元素原来的空间;visibility:hidden隐藏对应的元素并且挤占该元素原来的空间。