您可能不知道的CSS元素隐藏“失效”以其妙用

一、CSS元素隐藏

在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。后宫选秀——一个一个看。

{ display: none; /* 不占据空间,无法点击 */ }
{ visibility: hidden; /* 占据空间,无法点击 */ }
{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间,无法点击 */ }
{ position: absolute; top: -999em; /* 不占据空间,无法点击 */ }
{ position: relative; top: -999em; /* 占据空间,无法点击 */ }
{ position: absolute; visibility: hidden; /* 不占据空间,无法点击 */ } 
{ height: 0; overflow: hidden; /* 不占据空间,无法点击 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间,可以点击 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间,可以点击 */ } 
{
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
/* IE6/IE7/IE9不占据空间,IE8/FireFox/Chrome/Opera占据空间。都无法点击 */
}
{
position: absolute;
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
/* 不占据空间,无法点击 */
}

  

欢迎补充!

以上隐藏方法如果针对最小辈的子元素(膝下无子女),例如<img>图片元素,则上面的注释说明都是OK的(若有误,请指正)。

我以前就提过,为了便于理解,我们会使用情感化思维,类比现实,在内心形成只属于自己的具象化的想法。这是很OK的,但是,要知道,事物是具有两面的,具象的东西容易让我们陷入固定思维模式,尤其在现实世界中非特殊情境的验证下,从而让我们不经意间产生一些错误的认识。

上面的话有点像老油条——难嚼。要让老少皆懂,很简单,举几个简单的示例就可以了。而这里的示例就是上头几个隐藏的例子:由于具象化的固定思维,您可能并不知道下面要提到的几种CSS元素隐藏“失效”的情况!

您可能不知道的CSS元素隐藏“失效”以其妙用的更多相关文章

  1. 您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭

    一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: non ...

  2. 你可能不知道的CSS元素隐藏“失效”以其妙用

    在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀--一个一个看. { display: none; /* 不占据空 ...

  3. CSS元素隐藏的display和visibility

    一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击. { display: none; /* 不占据空间, ...

  4. 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  5. 你所不知道的 CSS 滤镜技巧与细节

    承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...

  6. 你所不知道的 CSS 阴影技巧与细节

    关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...

  7. 【CSS】346- 你所不知道的 CSS 阴影技巧与细节

    偷懒了1个多礼拜,在工作饱和的情况下,怎么坚持学习?今天的分享来自@Coco国服第一切图仔,我们聊聊CSS属性box-shadow- 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 ...

  8. css元素隐藏(display:none和visibility:hidden)

    在css中, display:none和visibility:hidden都能够使元素隐藏.但是两者所带来的效果完全不同. css  display:none 当使用该样式的时候,HTML元素的宽高等 ...

  9. CSS元素隐藏

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

随机推荐

  1. Ubuntu 15.10 下Scala 操作Redis Cluster

    1 前言 Redis Standalone,Redis Cluster的安装在前面介绍过,地址:http://www.cnblogs.com/liuchangchun/p/5063477.html,这 ...

  2. mongodb shell 运行js脚本的四种方式

    1. 交互式 mongo shell   大部分的 mongodb 教程,在第一章都会讲解这种方式. mongo 127.0.0.1:27017 use test db.users.findOne() ...

  3. outlook 2013撤消已经发送的邮件

    使用Outlook 2013发送邮件的时候,发送后,发现邮件写错了或者其它原因需要撤消发送邮件,这里介绍一下.   工具/原料 outlook 2013 方法/步骤   需要打开已经发送的邮件   点 ...

  4. EMQ消息队列初体验

    使用命令创建admin用户,密码123 emqx_ctl users add admin 配置规则/etc/emqx/acl.conf(除管理员,其他用户只能订阅限定的测试主题路径) %% 允许'ad ...

  5. 从9x9矩阵中抽取中间菱形区域打印 - perl

    起因: 源自于c的练习题,打印diamond,因为perl不需编译,方便调试,故先用perl实现一下 关键: 没有想到好的思路,只能借助于上一篇打印上下三角矩阵的方法,把菱形拆成上下左右4个三角矩阵区 ...

  6. 3、redis使用场景

    现代高并发复杂系统面临的挑战 现代系统随着功能的复杂化,各种各样需求层出不穷,面对愈加复杂话的业务系统.越来越庞大的用户群体,以及用户对体验的要求越来越高,性能就变得更加重要. 抛开代码逻辑.服务器性 ...

  7. 【docker】服务随容器启动而自启动

    场景: 有一个docker, 在该docker中有服务A,希望每次启动容器时服务A都随着容器启动.这样就不用每次都进入容器手动启动服务了. 方法: 1.需要在docker中添加一个启动服务脚本auto ...

  8. ORA-27302: 错误发生在: sskgpwrm1

    opidrv aborting process M002 ospid (3561) as a result of ORA-600ORA-27300: 操作系统相关操作: semctl 失败, 状态为: ...

  9. Java代码片段——向文件末尾添加内容

    BufferedWriter out = null; try { out = new BufferedWriter(new FileWriter(”filename”, true)); out.wri ...

  10. 创建自定义的 Angular Schematics

    本文对 Angular Schematics 进行了介绍,并创建了一个用于创建自定义 Component 的 Schematics ,然后在 Angular 项目中以它为模板演练了通过 Schemat ...