CSS隐藏元素的N种实现方式。
1. width:0;
光有高度是不行的,还得有宽度。缺点文字隐藏不了,可以加个
color:#fff
和背景颜色一样就ok了,障眼法,迷惑人的,其实内容还在,如果有文字的话,还是可以触发点击事件的,这种做法很多黑客就会利用在目标站点链接上加一个和背景颜色一样的让管理员发现不了。
2. height:0;
和上面一样,一个物体至少得有宽和高。
3. opacity:0;
元素还在,只是看不见而已。
4. position:absolute;left:-9999px;
元素还在,只是超出了屏幕范围。
5. text-indent:-9999;
只能达到隐藏文字的效果,没有其他副作用。给页面添加logo图片,还想seo添加文字又不想显示这段文字,就可以使用这个方法。
6. z-index:-99999;
需要配合定位使用,层级太低导致我们无法看见这个元素,使用这个缺点还是很多的,首先就算你
z-index:-9999
了并且定位,但如果这个元素比后面的元素高了或者宽了,再着有文字一样还是可以看到这个元素。
代码如下:
<style>
#box{
width:100px;
height:100px;
background-color:red;
position:absolute;
z-index:-9999;
}
</style>
<div id="box">111111</div>
<div>为什么要这样</div>
7. overflow:hidden;
如果元素超出所设置的宽和高,剩下的部分就会被隐藏,如果想让整个元素隐藏,设置宽和高为0就行。
width:0px;
height:0px;
overflow:hidden;
8. visibility:hidden;
元素被隐藏,但是还占位置。
9. display:none;
元素被隐藏,并且不占位置。
10. background-color:#fff;
把元素的背景颜色设置成body的背景,障眼法。
11. max-width:0px;
和
width:0px;
原理一样。
12. max-height:0px;
和
height:0;
原理一样。
13. background-color:rgba(0,0,0,0);color:#fff;
把元素透明度设置成0,达到看不见的效果,和opacity原理一样。如果想让文字也看不见,给它一个障眼法就好了,或者
font-size:0
14. font-size:0px;
隐藏文字的效果。
15. transform:translate(-9999px);
和
left:-99999px;
原理一样,把元素移出屏幕可视区。
16. transform:scale(0);
让元素的大小设置成0不就看不见了哈。
17. transform:skew(90deg);
让元素重和,看不见了。
18. margin-left:-9999px;
把元素移出屏幕可视区
19. -webkit-clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px);
把元素剪裁了。
CSS隐藏元素的N种实现方式。的更多相关文章
- 有趣的css—隐藏元素的7种思路
css隐藏元素的7种思路 前言 display.visibility.opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题. 属性 值 是否在页面上显示 注册点击事件是否有效 是否存在 ...
- css隐藏元素的几种方法与区别
css隐藏元素的几种方法与区别 一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方. 二:position:abso ...
- CSS隐藏元素的几种妙法
一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...
- CSS“隐藏”元素的几种方法的对比
本文地址:http://luopq.com/2016/02/15/css-tricks-of-hide-element/,转载请注明 一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设 ...
- CSS隐藏元素的几种方法
使用CSS隐藏元素的方法很多,在这里简单总结一下: 1.display:none display:none 应该是最常用的一种隐藏元素的方法,使用该方法隐藏的元素脱离文档流不占据空间,不会被浏览器解析 ...
- 用css隐藏元素的5种方法
.green { width: 100px; height: 100px; background-color: #a0ee00; text-align: center; float: left; ma ...
- CSS隐藏元素的五种方法
1.opacity:0 2.visibility:hidden 3.diaplay:none 4.position:absolute display display属性依照词义真正隐藏元素.将disp ...
- css隐藏元素的六类13种方法
隐藏元素的方法 隐藏元素的方法可以总结为六类:直接隐藏.对溢出内容隐藏.对元素透明度进行调整.将元素移除当前屏幕.对元素的层级关系进行调整.对元素进行裁剪 只有对元素的透明度进行调整才可以点击,其余都 ...
- html显示与隐藏元素的几种方式
html显示与隐藏元素的几种方式 1.display none : 无 隐藏元素 block : 显示 转换为块级元素 不占位:当隐藏的时候元素就完全没有了.不能看见和操作该元素. 优点:为其他元 ...
随机推荐
- Java日志系统及框架分析
最近在考虑将容器(Tomcat)内的应用日志统一成slf4j + logback,主要目的有: 快速定位应用日志输出路径,方便日志的采集: 能动态调整日志的级别,方便线上问题定位: 方便在容器层面做扩 ...
- HTML和XHTML的一点事儿.
什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (ma ...
- testng+reportng,运行xml
在看了http://seleniumcn.cn/read.php?tid=7960视频的Reportng后自己实验了下, 1.下载reportng-1.1.4.zip,解压后如下,把reportng- ...
- Entity Framework EF6使用 MySql创建数据库异常解决办法
EF6使用MySQL数据库时,第一次创建数据库出现“Specified key was too long; max key length is 767 bytes”错误,解决办法请见以下连接. htt ...
- onBlur事件与onfocus事件(js)
onFocus事件就是当光标落在文本框中时发生的事件. onBlur事件是光标失去焦点时发生的事件. 可以编如下例子 1.html <HTML><HEAD><TITL ...
- Revert R12.1.3 Homepage Layout to Link Style as in R12.1.1 or 11i
https://blogs.oracle.com/ptian/entry/revert_r12_1_3_homepage Oracle EBS 12.1.3主页的展示方式不太习惯,12.1.3为了展示 ...
- word 多级列表设置
今天写论文碰到了这个问题, 希望能出现这样的效果: 第一章 1.1 1.2 第二章 2.1 2.2 ...... 为了达到这个效果,晕死了.因为我的标题不是普通的默认标题一标题二 比如同济一标题 ...
- Replication的犄角旮旯(八)-- 订阅与发布异构的问题
<Replication的犄角旮旯>系列导读 Replication的犄角旮旯(一)--变更订阅端表名的应用场景 Replication的犄角旮旯(二)--寻找订阅端丢失的记录 Repli ...
- 【腾讯Bugly干货分享】Android ListView与RecyclerView对比浅析--缓存机制
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/5811d3e3ab10c62013697408 作者:黄宁源 一,背景 Recy ...
- SOA服务设计与实现的几个语言无关的原则速记
一.SOA定义 SOA即面向服务架构(Service-Oriented Architecture).在SOA中,一切皆服务.一个服务是通过消息交换来调用的程序,一个信息系统是共同完成一个特定任务的一组 ...