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. json格式化插件

    插件名称:JSON-Handle 下载地址: http://jsonhandle.sinaapp.com/

  2. 【opencv学习笔记五】一个简单程序：图像读取与显示

    今天我们来学习一个最简单的程序,即从文件读取图像并且创建窗口显示该图像. 目录 [imread]图像读取 [namedWindow]创建window窗口 [imshow]图像显示 [imwrite]图 ...

  3. [Hadoop]&nbsp;Sqoop安装过程详解

    Sqoop是一个用来将Hadoop和关系型数据库中的数据相互转移的工具,可以将一个关系型数据库(例如 : MySQL ,Oracle ,Postgres等)中的数据导进到Hadoop的HDFS中,也可 ...

  4. lca最近公共祖先（st表/倍增）

    大体思路 1.求出每个元素在树中的深度 2.用st表预处理的方法处理出f[i][j],f[i][j]表示元素i上方第2^j行对应的祖先是谁 3.将较深的点向上挪,直到两结点的深度相同 4.深度相同后, ...

  5. jquery 插件的实现和优化

    1.menus 实现: $.fn.menu=function(options){ var $this=$(this); var cross='<div class="zhiniu_cr ...

  6. tableview中用动画效果改变cell的高度

    我们要的效果大概就是如下效果: 当我们选择一个cell的时候,我们就要改变它的高度,并且以动画的形式. 我们该如何实现这个效果呢?我们主要需要使用以下这两个方法: - (CGFloat)tableVi ...

  7. 使用tcpdump抓取EOS帐户创建与交易数据

    基本环境配置 EOS 版本:1.0.1(2018-06-04更新)   节点nodeos http监听端口:127.0.0.1:8888 本地钱包keosd http监听端口:127.0.0.1:89 ...

  8. day7计算作业详解

    1.day7题目 1.判断一个数是否是水仙花数, 水仙花数是一个三位数, 三位数的每一位的三次方的和还等于这个数. 那这个数就是一个水仙花数, 例如: 153 = 13 + 53 + 3**3 2.给 ...

  9. Java怎么把一个.log文件，以text文件方式打开，显示在桌面

    总要有一个开始吧 群里面有一个哥们,问这个问题,索性记录下来, quextion: Java怎么把一个.log文件,以text文件方式打开,显示在桌面 anwser: 这里注意一个问题:拼接路径的时候 ...

  10. C# dynamic与var的区别

    1.C#编程总结(十四)dynamic 2.var和dynamic的区别及如何正确使用dynamic?