注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天朝布衣田中码农参上

苦逼码农的点点滴滴,请多多指教!

 
 
 

日志

 
 
 
 

用CSS隐藏页面元素的6种办法  

2017-09-20 09:49:39|  分类: CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
经常要用到这些隐藏页面元素方法,也许是因为动画,或者是针对权限,还有是为了布局更好看,但总而言之,方法可能有很多,但是其中还是有些差异,适应不同的开发目的。常见的办法如下:
1)Opacity
opacity 属性的意思是设置一个元素的透明度。这意味着将 opacity 设为 0 只能从视觉上隐藏元素,而元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互事件,属性可以用来实现一些效果很棒的动画。

.hide {opacity: 0;}

2)Visibility
值设为 hidden 将隐藏元素。如同 opacity 属性,被隐藏的元素依然会对网页布局起作用,但与opacity 唯一不同的是它不会响应任何用户交互事件。这个属性也能够实现动画效果,只要它的初始和结束状态不一样。这确保了 visibility 状态切换之间的过渡动画可以是时间平滑的。

.hide {visibility: hidden;}

3)Display
将 display 属性设为 none 确保元素不可见并且连盒模型也不生成。使用这个属性,被隐藏的元素不占据任何空间。不仅如此,一旦 display 设为 none 任何对该元素直接打用户交互操作都不可能生效。添加过渡动画是无效的,它的任何不同状态值之间的切换总是会立即生效。通过 DOM 依然可以访问到这个元素。

.hide {display: none;}

4)Position
想要与它交互,但是你又不想让它影响你的网页布局,只有将元素移出可视区域,这样Position就派上用场了。使用这个方法请千万不要去隐藏任何可以获得焦点的元素。

.hide {
position: absolute;
top: -9999px;
left: -9999px;
}

5)Clip-path
这个估计大家很少会用到,通过剪裁元素来实现隐藏,记住, clip-path 属性还 没有在 IE 或者 Edge 下被完全支持 。这个方法的好处就在于可以隐藏想要隐藏的元素某个部分,其实就相当于给元素加了一个蒙版遮罩。如果剪裁区大小为零,那么这个元素就完全不可交互,如果有剪裁区大小,那么只要鼠标进入剪裁区,就可以响应交互事件。

.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

6)Z-index
这个属性相信大家都经常用到,如果用它来隐藏元素就只要把相关元素的z-index设置到最低层,且上面有另一个元素可以遮住该元素即可。原理就相当于把它隐藏到其它元素的层下面,让用户看不到。请记住,Z-index属性只能工作于那些被定义了position属性的元素中。

.hide {
 position: relative; z-index : 1;

}

在这篇教程里,我们看了 6 种不同的通过 CSS 隐藏元素的方法。每一种方法都与其他几种有一点区别,您可以根据实际需求选择最佳方式。
  评论这张
 
阅读(0)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017