CSS显示与隐藏div的方法
墨初 Web前端 554阅读
css样式代码是可以隐藏指定的div的,下面是具体的使用方法,大家可以借鉴一下。
css显示隐藏div的方法
方法1:
在CSS中display属性表示"显示框类型",即不同的盒模型。简单来说,可以把块级盒子转成内联盒子,也可以把内联盒子转换为块级盒子,同时也可以隐藏元素。
例:
<style> .none{ display:none; } </style> <div class="none">在页面中是看不到这个div元素的</div> <div class="block">在这个页面是可以看到这个页面的</div>
注意:
1、上面的代码将class类的none的CSS中的dispaly属性设置为none ,则可以隐藏掉div。
2、display隐藏掉的元素是不占用页面空间的
方法2:
也可以使用CSS中的opacity属性来设置元素的透明度,透明度设置为0,则元素也可以达到隐藏的效果。
例:
<style> .none{ opacity:0; } </style> <div class="none">在页面中是看不到这个div元素的</div> <div class="block">在这个页面是可以看到这个页面的</div>
注:通过CSS中的opacity设置透明度隐藏的元素,在隐藏后还是可以占用页面空间的。