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. Python模块学习——optparse

    Python 有两个内建的模块用于处理命令行参数: 一个是 getopt,<Deep in python>一书中也有提到,只能简单处理 命令行参数: 另一个是 optparse,它功能强大 ...

  2. [poj3107/poj2378]Godfather/Tree Cutting树形dp

    题意:求树的重心(删除该点后子树最大的最小) 解题关键:想树的结构,删去某个点后只剩下它的子树和原树-此树所形成的数,然后第一次dp求每个子树的节点个数,第二次dp求解答案即可. 此题一开始一直T,后 ...

  3. 用c++STL实现进程管理

    项目要求: 设计一个允许n个进程并发运行的进程管理模拟系统.该系统包括有简单的进程控制,其进程调度采用时间片轮转算法.每个进程用一个PCB表示,其内容根据具体情况设置.各进程之间有一定的同步关系(可选 ...

  4. day8 服务器

    XML约束 XML约束要求:大家能够看懂约束内容,根据约束内容写出符合规则的xml文件. 2.1 引入 XML语法: 规范的xml文件的基本编写规则.(由w3c组织制定的) XML约束: 规范XML文 ...

  5. centos6.5安装FTP服务器

    1.检测是否安装了FTP rpm -q vsftpd 2.安装ftp yum install vsftpd 3.完成ftp安装后,将 /etc/vsftpd/user_list 和 /etc/vsft ...

  6. Spring入门第十七课

    AOP编程 问题: 代码混乱: 越来越多的非业务需求(日志和验证等)加入后,原有的业务方法急剧膨胀,每个方法在处理核心逻辑的同事还必须兼顾其他多个关注点. 代码分散:以日志需求为例,只是为了满足这个单 ...

  7. jQuery命名空间和自定义插件的的多种方法

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jquery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  8. Spring Boot实现学生信息增删改查

    上一篇博客写了如何初始化一个简单的Spring Boot项目,这次详细记录一下如何连接数据库并实现增删改查基本操作. 我使用的是MySQL 5.5+Navicat,MySQL量级比较轻,当然微软的SQ ...

  9. Parallel类

    Parallel类是对线程很好的一个抽象.该类位于System.Threading.Tasks名称空间中,提供了数据和任务并行性. Parallel类定义了并行的for和foreach的静态方法.Pa ...

  10. Keras AttributeError 'NoneType' object has no attribute '_inbound_nodes'

    问题说明: 首先呢,报这个错误的代码是这行代码: model = Model(inputs=input, outputs=output) 报错: AttributeError 'NoneType' o ...