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. MVVM里绑定TreeView控件的SelectedItem

    <TreeView x:Name="treeView"> <i:Interaction.Triggers> <i:EventTrigger Event ...

  2. Sharding & IDs at Instagram, Flickr ID generation

    Instagram: http://instagram-engineering.tumblr.com/post/10853187575/sharding-ids-at-instagram Flickr ...

  3. 7.22实习培训日志-JSP Servlet

    周末总结 今天下午在学习servlet,想自己做一个简单的例子,于是用idea新建一个maven项目,为了后文叙述方便,我们取名为项目1,点击create from archetype,我先选择org ...

  4. view如何从action中取得数据和 Html辅助方法

    方式:1使用弱类型取,2,使用强类型,两者的差别在于view页面最上方声明的方式   如果使用弱类型接受来自控制器的数据,在view页面里完全不需要有任何的生命,数据可以从ViewData,ViewB ...

  5. 51nod1202【DP-树状数组维护】

    思路: DP[i]代表从1 到 i 以 a[i] 为末尾的子序列个数,dp[i]=dp[i]+dp[j](a[i]!=a[j]) +1 利用树状数组维护以值 a[i] 结尾的子序列个数. #inclu ...

  6. Solr 6.7学习笔记（08）-- Facet

    在搜索中,我们搜索时,通常会自动返回一些相关的搜索.比如,你搜索了一本书,会自动返回作者信息加上他的其它书籍的数量.这种功能在Solr中称之为Facet.不太好翻译.下面对于参数的说明,我以搜索“手机 ...

  7. IT兄弟连 Java语法教程 变量1

    什么是变量 在Java程序中,变量是基本的存储单元.是在程序运行中值可以改变的一块内存区域.变量是通过标识符(变量名).变量类型及可选的初始化器来定义的,此外,所有的变量都有作用域,作用域定义了变量的 ...

  8. Programming Ruby 阅读笔记

    在Ruby中,通过调用构造函数(constructor)来创建对象 song1=Song.new("Ruby") Ruby对单引号串处理的很少,除了极少的一些例外,键入到字符串字面 ...

  9. PJzhang:搜索引擎高级语法与渗透测试

    猫宁!!! 参考链接: https://www.freebuf.com/articles/network/169601.html https://www.jianshu.com/p/f8062e2cc ...

  10. php追加数组的问题

    PHP数组合并两种方法及区别 如果是关联数组,如下: 代码如下: $a = array( 'where' => 'uid=1', 'order' => 'uid', ); $b = arr ...