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 : 显示 转换为块级元素 不占位:当隐藏的时候元素就完全没有了.不能看见和操作该元素. 优点:为其他元 ...
随机推荐
- asp.net core 使用protobuf
在一些性能要求很高的应用中,使用protocol buffer序列化,优于Json.而且protocol buffer向后兼容的能力比较好. 由于Asp.net core 采用了全新的MiddleWa ...
- cognos制作报表流程
第一章 创建报表 制作ReportStudio报表,步骤如下图所示: 第二章 添加查询 1.点击中间栏的查询资源管理器,然后点击查询,就可以新建查询.步骤如下图所示: 2.点击查询出现的页面: 3.在 ...
- 使用Maven自动部署Tomcat 6和Tomcat 7下Web应用
使用Maven自动部署Tomcat 6和Tomcat 7下Web应用 开启Tomcat远程管理权限 在tomcat的config目录下的tomcat-users.xml文件, <role rol ...
- c#.net中参数修饰符ref,out ,params解析
params ============================================================================================= ...
- LR loadrunner参数化-笔记
LR在录制程序运行的过程中,VuGen(脚本生成器) 自动生成了包含录制过程中实际用到的数值的脚本,如果你企图在录制的脚本中使用不同的数值执行脚本的活动(如查询.提交等等),那么你必须用参数值取代 ...
- Android服务开机自启动
新任务需要Android程序开机跑一个服务,查找资料得出如下方法: 用广播的方法监听系统启动事件:android.intent.action.BOOT_COMPLETED 并在AndroidManif ...
- MVC 会员注册
@{ ViewBag.Title = "Register"; } <script src="~/Scripts/jquery-2.1.0.js">& ...
- java异常处理机制
本文从Java异常最基本的概念.语法开始讲述了Java异常处理的基本知识,分析了Java异常体系结构,对比Spring的异常处理框 架,阐述了异常处理的基本原则.并且作者提出了自己处理一个大型应用系统 ...
- redhat7 yum安装
redhat 的更新包只对注册的用户生效,所以我们自己手动更改成CentOS 的更新包,CentOS几乎和redhat是一样的,所以无需担心软件包是否可安装,安装之后是否有问题,另外CentOS公司去 ...
- Dubbo框架选型
一.为什么会是dubbo 1.Dubbo是一个分布式服务框架,提供RPC(远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.) 远程服务调用方案,以及SOA ...