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. ActiveRecord 的类型初始值设定项引发异常

    最近在研究ActiveRecord网上有很多贴子讲怎么用的.但自己照做就是出错. 最终定位在配置文件出错.应该是ActiveRecord有更新的原因.在国外的网站把配置复制了一份替换.问题解决了.我用 ...

  2. java——类的封装

    public void setName(String str) { name=str; } public void setAge(int a) //set方法需要在括号中定义数据类型 { if(a&g ...

  3. ie8兼容rgba的方法

    现在做个网页还得考虑ie8,只想说:尼玛! 但是没办法,屈于淫威也得弄. 首先说下rgba的含义吧,rgba,r代表red,g代表green,b代表blue,a代表透明度. filter:progid ...

  4. CodeForces 1118F2. Tree Cutting (Hard Version)

    题目简述:给定$n \leq 3 \times 10^5$个节点的树,其中一部分节点被染色,一共有$k$种不同的颜色.求将树划分成 $k$ 个不相交的部分的方案数,使得每个部分中除了未染色的节点以外的 ...

  5. function multi-versioning in GCC

    https://lwn.net/Articles/691932/ https://gcc.gnu.org/wiki/FunctionMultiVersioning why multi-versioni ...

  6. 小程序[邮箱提取器-EmailSplider]总结

    1.背景情况     学东西做快的是付诸实践,写这个小程序的目的就是为了综合运用各个知识点,从而提升学习的效果.   2.涉及知识     A.Swing 的布局     B.Swing中,线程访问U ...

  7. login.aspx.cs

    using System;                                                                 //指令+系统(命名空间)using Sys ...

  8. 【原】：关于使用springmvc的responseBody注解返回json的一些总结

    配置不正确可能会出现406错误 1:首先需要导入三个jar包: 2:需要在springmvc的配置文件文件中添加转换器并开启注解驱动: 3:controller:这里返回object也是可以的; 4: ...

  9. 死磕 java同步系列之JMM（Java Memory Model）

    简介 Java内存模型是在硬件内存模型上的更高层的抽象,它屏蔽了各种硬件和操作系统访问的差异性,保证了Java程序在各种平台下对内存的访问都能达到一致的效果. 硬件内存模型 在正式讲解Java的内存模 ...

  10. Windows CreateEvent，SetEvent，WaitForSingleObject的用法

    http://blog.pfan.cn/embed/19089.html WaitForSingleObject的用法 DWORD WaitForSingleObject(   HANDLE hHan ...