在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);
/* 不占据空间,无法点击 */
}

css隐藏元素的更多相关文章

  1. CSS隐藏元素的几种方法

    使用CSS隐藏元素的方法很多,在这里简单总结一下: 1.display:none display:none 应该是最常用的一种隐藏元素的方法,使用该方法隐藏的元素脱离文档流不占据空间,不会被浏览器解析 ...

  2. CSS隐藏元素的几种妙法

    一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...

  3. CSS“隐藏”元素的几种方法的对比

    本文地址:http://luopq.com/2016/02/15/css-tricks-of-hide-element/,转载请注明 一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设 ...

  4. css隐藏元素的六类13种方法

    隐藏元素的方法 隐藏元素的方法可以总结为六类:直接隐藏.对溢出内容隐藏.对元素透明度进行调整.将元素移除当前屏幕.对元素的层级关系进行调整.对元素进行裁剪 只有对元素的透明度进行调整才可以点击,其余都 ...

  5. css隐藏元素的几种方法与区别

    css隐藏元素的几种方法与区别 一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方. 二:position:abso ...

  6. 【前端】CSS隐藏元素的方法和区别

    CSS隐藏元素的方法和区别 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. 有趣的css—隐藏元素的7种思路

    css隐藏元素的7种思路 前言 display.visibility.opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题. 属性 值 是否在页面上显示 注册点击事件是否有效 是否存在 ...

  8. 用css隐藏元素的5种方法

    .green { width: 100px; height: 100px; background-color: #a0ee00; text-align: center; float: left; ma ...

  9. 不同场景下使用CSS隐藏元素

    使用 CSS 让元素不可见的方法很多,剪裁.定位到屏幕外.明度变化等都是可以的.虽然它们都是肉眼不可见,但背后却在多个维度上都有差别. 元素不可见,同时不占据空间.辅助设备无法访问.不渲染 使用 sc ...

  10. CSS隐藏元素的五种方法

    1.opacity:0 2.visibility:hidden 3.diaplay:none 4.position:absolute display display属性依照词义真正隐藏元素.将disp ...

随机推荐

  1. spark RDD运算机制

  2. Android中的APinner2

    Spinner提供了从一个数据集合中快速选择一项值的办法.默认情况下Spinner显示的是当前选择的值,点击Spinner会弹出一个包含所有可选值的dropdown菜单,从该菜单中可以为Spinner ...

  3. visual stdio使用

    现在转换使用visual stdio,因为很多和以前的快捷键不同,也不打算换了,这样可移动性应该更好吧. 1.注释代码, 首先按下ctrl + k,然后再按下ctrl + c 2.取消注释,首先按下c ...

  4. inventor安装失败怎样卸载安装inventor 2016?

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  5. 搭建Activemq集群

    首先搭建zookeeper集群: 参考URL:  http://www.cnblogs.com/feiyun126/p/7244394.html 三台服务器:先设置hosts 10.0.0.231 n ...

  6. hduoj 2955Robberies

    Robberies Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  7. jQuery.hover() 函数详解

    hover()函数用于为每个匹配元素的hover事件绑定处理函数. hover事件就是鼠标悬停事件.此外,你还可以额外传递给事件处理函数一些数据. 此外,你可以为同一元素多次调用该函数,从而绑定多个事 ...

  8. angularjs ui-grid如何动态设置行高

    自己开发的公众号,可以领取淘宝内部优惠券 在用ui-grid的时候我们可以用rowHeight设置行高,可是每一行的高度都是一样的,无法根据行内的内容进行自适应.如下图 为了解决这个问题,google ...

  9. python的字符串操作

    1.修改大小写 (1)title()以首字母大写的方式显示每个单词,即将每个单词的首字母都改为大写.这很有用, 因为你经常需要将名字视为信息.例如,你可能希望程序将值Ada.ADA和ada视为同一个名 ...

  10. spring mvc踩坑记

    前言 主要介绍自己在学习spring mvc过程中踩到的一些坑,涉及到当时遇到这个错误是如何思考的,对思路进行总结,下次遇到类似的错误能够提供一些思路甚至快速解决. 环境准备 jdk8,spring4 ...