在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。下面一个个列出,选一个适合你的

{ display: none; /* 不占据空间,无法点击 */ }
{ visibility: hidden; /* 占据空间,无法点击 */ }
{ 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);
/* 不占据空间,无法点击 */
}

 

来自:http://www.downcc.com/tech/4034.html

CSS中如何让元素隐藏的更多相关文章

  1. css中实现显示和隐藏(转)

    CSS中的display和visibility      在平时的开发过程中,总是会遇到一些文字在特定的场景下显示或者隐藏来达到我们想要的效果,css中display和visibility语法,他们都 ...

  2. CSS中如果实现元素浮动和清除浮动,看这篇文章就足够了

    浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...

  3. CSS中模拟父元素选择器

    很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...

  4. css中的伪元素,我今天记住了!o~yeah

    对于伪类和伪元素,我如果要区别它们,一般是使用css中的手册来区分,平常时候也没特意去记,需要用到时打开手册“哦,这个是伪元素,这个是伪类”,我个人觉的某些东西你把它存在网上,不一定要存在头脑中.带着 ...

  5. css鼠标悬浮控制元素隐藏与显示

    在网页开发中经常有需求是鼠标移动到一个元素A身上时,另外一个元素B显示. 如下图 当鼠标移到图片上时,相关的描述从下方显示出来. css实现原理与情景: A 是 B 的父元素 B 默认隐藏 B{opa ...

  6. CSS中怎么设置元素水平垂直居中?

    记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐.text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微 ...

  7. css中块级元素、内联元素(行内元素、内嵌元素)

    Block element 块级元素    顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...

  8. 理解 CSS 中的伪元素 :before 和 :after

    CSS 的主要目的是给 HTML 元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上 CSS 中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你一定 ...

  9. CSS中为什么有的元素能够设置高度,而有的元素却不能设置高度与宽度?

    可以使用{display:block}将内联元素变为块级元素,同时使用{display:inline}将块级元素变为内联元素. {display:inline-block}又是怎么回事,根据张鑫旭老师 ...

随机推荐

  1. subline

    快捷键(preference->key bindings): [ { "keys": ["ctrl+d"], "command": & ...

  2. linux socket连接中 ERRNO错误

    Connection refused:应该是连接的服务端没有启动或者连接端口错误,可以用如下代码测试 client端: #include <stdio.h> #include <sy ...

  3. AttributeError: 'list' object has no attribute 'write_pdf'

    我在可视化决策树,运行以下代码时报错:AttributeError: 'list' object has no attribute 'write_pdf' 我使用的是python3.4 from sk ...

  4. 解决Android SDK下载和更新失败的方法(Win系统) 和离线安装

    http://jingyan.baidu.com/article/a3a3f811f370558da2eb8a94.html http://jingyan.baidu.com/article/636f ...

  5. CentOS7:Puppet推送Zabbix Agent

    创建zabbix模块目录: $ mkdir -p /etc/puppet/modules/zabbix/{manifests,templates} 创建init.pp清单: $ cat /etc/pu ...

  6. WIN7 OEM Nin1 地址

    WIN7 SP1 OEM Nin1 201205 一.映像版本列表 Windows 7 旗舰版 32位 LENOVOWindows 7 旗舰版 32位 ASUSWindows 7 旗舰版 32位 AC ...

  7. Error:The network adaptor could not establish the connection问题的解决办法

     最近在学习hibernate 5.0.4, 自然而然就需要使用数据库,由于本人工作中一直使用Oracle,于是在自己的电脑上安装了Oracle 12.1.0, 安装完成使用一直没有问题,突然有一天使 ...

  8. 单片机联网需求攀升 WIZnet全硬件TCP/IP技术崛起

    --新华龙电子为韩国WIZnet公司网络芯片授权代理商,具有20多年的专业团队IC应用开发实力-- 如今不管是在企业还是小区.街道,甚至是居民室内,以太网接口无处不在.有鉴于此,电子设备必将向更加智能 ...

  9. delphi dev 汉化

    //把以下文件复制到记事本中,并保存为DevChs.ini放在exe的目录下 //有这个cxLocalizer控件 //主窗体创建的时候 if (fileexists(ExtractFilePath( ...

  10. SVN show log failed

    Q: SVN 不能显示日志 能正常update, commit,但是show log的时候报错 A:可能原因是服务器权限配置问题 修改配置文件svnserve.conf 和 authz, 修改前请先备 ...