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

一：display：none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外，基本效果卓越，没什么让人诟病的地方。

二：position：absolut;left/top:-99999px;足够大的负值使其不可见

三：visibility：hidden；隐藏占位，不会响应点击事件。

四：opacity：0；严格来说这个并不是隐藏，透明之后它还占据着页面位置，所以在重排的时候还是会被计算消耗性能。
五：width/height为0 而且可以在二级下拉菜单中设置其慢慢打开的效果。相对于 display 来说适用范围太窄，但是好处是能使用 CSS3 动画。
六：拿一个白色div盖住它，或者和背景颜色相同。可以出现回字显现效果；

三四可以隐藏单选按钮，并且不影响功能使用。

不用js,用单选按钮判断当前是否被选中。

css隐藏元素的几种方法与区别的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

  7. 隐藏input的三种方法和区别

    一.<input type="hidden" />二.<input type="text" style="display:none& ...

  8. CSS隐藏元素的几个方法（display，visibility）的区别

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

  9. CSS隐藏元素的N种实现方式。

    1. width:0; 光有高度是不行的,还得有宽度.缺点文字隐藏不了,可以加个color:#fff和背景颜色一样就ok了,障眼法,迷惑人的,其实内容还在,如果有文字的话,还是可以触发点击事件的,这种 ...

随机推荐

  1. Tomcat访问程序外的上传文件

    自己在编写程序时,把图片上传到程序根目录下,但是页面使用<img> 没有显示.但是,当我刷新项目下文件夹后,页面刷新可以显示. 我通过网上查询,当在Tomcat下的server.xml配置 ...

  2. WPF ChangePropertyAction中TargetName和TargetObject的区别

    在wpf页面布局中经常用到ChangePropertyAction来更改属性,在这个里面有TargetName和TargetObject两个属性,都表示需要修改的控件名称,那么这两个有什么区别呢,通过 ...

  3. 在VC6的debug框里面输出版权信息

    在VC6的debug框里面输出版权信息,效果如下: 原理是: 新建一个批处理文档:如:"info.bat",放置到工程目录下[和dsw同级] @echo ===本程序作者是不要呵呵 ...

  4. 1、R-reshape2-cast

    1.cast:     长型数据转宽型数据 (1).acast,dcast的区别在于输出结果.acast 输出结果为vector/matrix/array,dcast 输出结果为data.frame. ...

  5. android fragment ontouch 事件

    由于fragment是存在于activity之中的,所以触摸事件会被activity首先得到. 为了在fragment中执行ontouch方法,需要做如下处理: mFragment = new Tab ...

  6. JavaScript操作服务器控件之Gridview控件

    1.JavaScript脚本如下: <script language="javascript" type="text/javascript">    ...

  7. 基于zookeeper实现分布式配置中心（一）

    最近在学习zookeeper,发现zk真的是一个优秀的中间件.在分布式环境下,可以高效解决数据管理问题.在学习的过程中,要深入zk的工作原理,并根据其特性做一些简单的分布式环境下数据管理工具.本文首先 ...

  8. 当Python中混进一只薛定谔的猫……

    本文原创并首发于公众号[Python猫],未经授权,请勿转载. 原文地址:https://mp.weixin.qq.com/s/-fFVTgWVsydFsNu1nyxUzA Python 是一门强大的 ...

  9. 卸载/安装ubuntu系统教程

    卸载ubuntu 1.修复Mbr 1.下载软件MbrFix,地址:https://www.softpedia.com/get/System/Hard-Disk-Utils/MBRFix.shtml 2 ...

  10. [poj]开关类问题 枚举 位运算

    poj 1222  EXTENDED LIGHTS OUT 开关只有两种方案 按和不按,按两次相当于关 只用枚举第一排开关的按法即可,剩下的行为使上一排的灯全部关闭,按法可以确定,并且是唯一的. 最后 ...