在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. 工作ui(2)

    做完整个小Demo整理的一些方法和踩过的miniUI的坑,分享出来希望大家批评指正,共同进步. 1.动态创建列:尽量不要直接在html文件里创建列,动态设置在js文件里方面添加.修改等. 首先把列定义 ...

  2. APP测试总结1

    1.安装.卸载测试 安装.卸载测试主要针对编译后源程序生成的APK安装文件 主要测试点: 1).生成的APK文件在真机上可以安装及下载 2).Android手机端的通用安装工具,如:豌豆荚及91助手等 ...

  3. SpringBoot初始教程之Servlet、Filter、Listener配置详解

    1.介绍 通过之前的文章来看,SpringBoot涵盖了很多配置,但是往往一些配置是采用原生的Servlet进行的,但是在SpringBoot中不需要配置web.xml的 因为有可能打包之后是一个ja ...

  4. vue router-link 添加在定义事件

    在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况 我想要做的是v-for遍历出来的选项卡, 鼠标移上去出现删除标签,移除标签消失的效果 原代码: ...

  5. 性能测试工具LoadRunner11-LR之Virtual User Generator 移动app录制

    准备条件: 1.安装插件LR_03105_Patch4.EXE,安装完成之后就会有Mobile App(HTTP/HTML),如下截图所示 2.安装热点wifi,160wifi(注:有可能有的热点软件 ...

  6. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

  7. Murano Weekly Meeting 2015.10.13

    Meeting time: 2015.October.13th 1:00~2:00 Chairperson:  Serg Melikyan, PTL from Mirantis Meeting sum ...

  8. Castle.DynamicProxy的使用

    .Net平台AOP技术研究 简单实现 通过继承实现 public interface ICoding { void DoSth(); } public class Coding : ICoding { ...

  9. MongoDB Windows环境搭建

    简介 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. MongoDB 旨在为WEB应用提供可扩展的高性能数据存 ...

  10. asp.net core 2.1 生成swagger文档

    新建asp.netcore2.1 api项目 “WebApplication1” 在nuget管理器中添加对Swashbuckle.AspNetCore 3.0.0.Microsoft.AspNetC ...