从隐藏元素谈起

原创 2016年08月16日 14:36:53

前言

个人博客:Damonare的个人博客

    说起隐藏元素我想每一个前端er都能说起几种,但能说全的我想就不是很多了。博主总结了几种隐藏元素的方法,总结如下表格:

  overflow opacity visibility display position clip(clip-path) z-index
属性值 hidden 0 hidden none absolute rect()/inset()/polygon() -1000

我们为什么会需要这么多隐藏元素的方法呢,而且他们看起来实现的都是同样的效果。其实每一种方法实际上都有一些细微的不同,这些不同决定了在一些特定场合下使用哪一种方法。我们下面细细探讨下这些细微之处.

1. overflow

.hide{
     overflow:hidden; /* 占据空间,无法点击 */ 
}

overflow的hidden用来隐藏元素溢出部分,占据空间,无法响应点击事件。

2.opacity

.hide{
    opacity:0;/* 占据空间,可以点击 */
}
.hide_2{
    -webkit-filter:opacity(0);
    filter:opacity(0);/* 占据空间,可以点击 */
}

过滤元素filter也可使用opacity值设置透明度,不过filter现在的兼容性不好,只支持webkit内核,这里顺带一提。

opacity是用来设置元素透明度的,但当设置成0的时候也就相当于隐藏元素了。因此,元素依然存在原来的位置,占据空间也可响应事件。如果你打算使用 opacity 属性在读屏软件中隐藏元素,很不幸,你并不能如愿。元素和它所有的内容会被读屏软件阅读,就像网页上的其他元素那样。换句话说,元素的行为就和它们不透明时一致。

3.visibility

.hide{
    visibility:hidden; /* 占据空间,无法点击 */
}

如同 opacity 属性,被隐藏的元素依然会对我们的网页布局起作用。与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏

4.display

.hide{
    display:none;/* 不占据空间,无法点击 */ 
}

经典的display隐藏元素,这个是彻底的隐藏了元素,不占据空间,也就不影响布局,当然也无法响应事件。

5.position

.hide{
    positionabsolute;
    left:-99999px;
    top:-90999px;/* 不占据空间,无法点击 */ 
}
.hide——2{
    positionrelative;
    left:-99999px;
    top:-90999px;/* 占据空间,无法点击 */ 
}

假设有一个元素你想要与它交互,但是你又不想让它影响你的网页布局,没有合适的属性可以处理这种情况(opacity 和 visibility 影响布局, display 不影响布局但又无法直接交互——译者注)。在这种情况下,你只能考虑将元素移出可视区域。这个办法既不会影响布局,有能让元素保持可以操作。下采用这种办法未尝不可

6.clip/clip-path

.hide{
    position:absolute;/*fixed*/
    clip:rect(top,right,bottom,left);/* 占据空间,无法点击 */ 
}
.hide_2 {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

隐藏元素的另一种方法是通过剪裁它们来实现。在以前,这可以通过 clip 属性来实现,但是这个属性被废弃了(现在浏览器依然支持),换成一个更好的属性叫做 clip-path。clip-path属性实在是用处大大滴有,可以很容易的实现一些复杂的图形大漠老师分享的一个链接,该链接里的图形大多都是用clip-path的polygon值来实现的。但可惜的是依旧只能在chrome40+浏览器里使用.

7.z-index

.hide{
    position:absolute;
    z-index:-1000;/* 不占据空间,无法点击 */ 
}

通过设置z-index值使其它元素遮盖该元素也算是一种隐藏了。

后记

在这篇教程里,我们看了 7 种不同的通过 CSS 隐藏元素的方法。每一种方法都与其他几种有一点区别。知道你想要实现什么有助于你决定采用哪一个属性,随着时间推移,你就能根据实际需求本能地选择最佳方式了。如果你对于隐藏元素的这些方法还有任何问题,请在评论中留言。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Jizhen_Tan/article/details/52220716

非线性科学丛书\从抛物线谈起——混沌动力学引论(郝柏林).pdf

  • 2009年05月29日 13:13
  • 5.56MB
  • 下载

[转载] 一封写给中国学生的信:从诚信谈起

作者:李开复 选自:www.opentest.net 今年5月23日,比尔·盖茨先生在《华尔街日报》上撰文,支持和敦促美国政府给予中国永久性正常贸易国待遇。文中,他特别谈到了在清华大学与中国大学生那次...
  • myhan
  • myhan
  • 2004-11-06 05:02:00
  • 1468

想实现 DCGAN?从制作一张门票谈起!

生成对抗网络因为优雅的创意和优秀的性能吸引了很多研究者与开发者,本文从简洁的案例出发详解解释了 DCGAN,包括生成器的解卷积和判别器的卷积过程。此外,本文还详细说明了 DCGAN 的实现过程,是非常...
  • Uwr44UOuQcNsUQb60zk2
  • Uwr44UOuQcNsUQb60zk2
  • 2018-01-17 06:50:49
  • 434

从变质量物体的运动谈起.pdf

  • 2009年01月09日 14:33
  • 196KB
  • 下载

智能机器人系列一:从英伟达谈起,AI芯片创造新的智能世界

  • 2017年03月09日 11:02
  • 930KB
  • 下载

第一次创业还是失败了---分享失败的经验

/*/……………………………..原文转载开始  记得2012年3月那会,人还在腾讯(深圳总部),有天突然考虑想换工作去上海,因为毕竟离家近,楼主是江苏人,可是当天晚上,我鬼使神差的接到了 A(后来创...
  • siaswj
  • siaswj
  • 2014-01-09 18:17:36
  • 705

从抛物线谈起——混沌动力学引论

  • 2007年04月03日 19:07
  • 2.97MB
  • 下载

高中课本里的「机器学习」

本文来自作者 止斋少主 在 GitChat 上分享「机器学习入门第一课:从高中课本谈起」,「阅读原文」查看交流实录 「文末高能」 编辑 | 嘉仔 高中课本那些事 点连成线 ...
  • GitChat
  • GitChat
  • 2017-12-01 00:00:00
  • 155

从“==”谈起

写在前面        以前觉得写技术博客是一产出比不高的事情,但是最近发现写写博客能帮助自己整理思路,理清脉络,加深印象。若有浅陋愚笨,以管窥天之言,能得大方之家指出,或有幸只言片语能幸解他人一时之...
  • David__Kong
  • David__Kong
  • 2015-04-12 07:11:53
  • 93

clementine详细教程

  • 2009年06月24日 20:58
  • 6.98MB
  • 下载
收藏助手
不良信息举报
您举报文章:从隐藏元素谈起
举报原因:
原因补充:

(最多只允许输入30个字)