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 : 显示 转换为块级元素 不占位:当隐藏的时候元素就完全没有了.不能看见和操作该元素. 优点:为其他元 ...
随机推荐
- 部署额外域控制器,Active Directory
部署额外域控制器 转自:http://yuelei.blog.51cto.com/202879/117599 如果域中只有一台域控制器,一旦出现物理故障,我们即使可以从备份还原AD,也要付出停机等 ...
- Postman-CI集成Jenkins
Postman-简单使用 Postman-进阶使用 Postman-CI集成Jenkins Newman 官方说明:Postman's command-line companion lets you ...
- maven 搜索不到想从本地仓库依赖的jar包--重建本地maven仓库索引
问题:有时候本地仓库有相关的jar包,但是在pom.xml中利用工具搜索不到 菜单栏设置显示Maven Respositorise视图:Windows--Show View--Other.. (对 ...
- JDBC Boilerplate
public class Student{ private Integer studId; private String name; private String email; private Dat ...
- 结对开发训练(续)(郭林林&胡潇丹)
本次题目:求二维数组最大连续的子数组之和. 通过前两次对问题的分析,这次在拿到题目时,我们首先与前两次题目做对比,尤其与第二次的题目相比较,这是在第二次题目上的扩展,第二次的题目是此次题目的一个特例. ...
- windows phone 8.1教务在线客户端(后续)
经过了一番折腾,这个wp教务在线算是告一段落了,其实原理很简单,就是post方式访问登陆页面返回cookie,然后带着这个cookie用get方式继续访问你想要访问并取回内容的页面,而且httpcli ...
- C#常用代码集合(1)
引用自james li的博客,地址:http://www.cnblogs.com/JamesLi2015/p/3147986.html 1 读取操作系统和CLR的版本 OperatingSys ...
- 1.webService入门
学习webService前,先来思考一个问题: 请看以下截图: 以上是一个综合网站的部分显示信息,我们能很明显的看出打开该网页所处区域的一些信息,比如:地点是厦门,天气是阵雨,温度是9摄氏度等等... ...
- Win7系统修改hosts文件不能保存的解决方法
地址:http://jingyan.baidu.com/album/e5c39bf56564a539d7603312.html
- 练习2-3:十六进制数字字符串转换为等价整型值,字符串允许包含的数字包括:0~9、a~f、A~F、x、X(C程序设计语言 第2版)
#include <stdio.h> #include <string.h> #include <math.h> int htoi(char s[]){ unsig ...