首页 / CSS / 有趣的css—隐藏元素的7种思路
有趣的css—隐藏元素的7种思路
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了有趣的css—隐藏元素的7种思路,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3558字,纯文字阅读大概需要6分钟。
内容图文
![有趣的css—隐藏元素的7种思路](/upload/InfoBanner/zyjiaocheng/999/4232e5ea0a6144a98ee40517857203f3.jpg)
display、visibility、opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题。 除了display、visibility、opacity三个属性可以隐藏元素之外,是否还存在其它属性可以隐藏元素呢? 它们之间又存在什么必然的联系呢? 这就是我们今天要讨论的问题
css隐藏元素的7种思路
前言
display、visibility、opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题。
属性 | 值 | 是否在页面上显示 | 注册点击事件是否有效 | 是否存在于可访问性树中 |
---|---|---|---|---|
display | none | 否 | 否 | 否 |
visibility | hidden | 否 | 否 | 是 |
opacity | 0 | 否 | 是 | 是 |
除了display、visibility、opacity三个属性可以隐藏元素之外,是否还存在其它属性可以隐藏元素呢?它们之间又存在什么必然的联系呢?这就是我们今天要讨论的问题。
注:由于篇幅有限,本文并未提及一些像filter:alpha(opacity=0); zoom:0;之类的兼容属性。
第一种:移除出可访问性树
display : none
display属性可以设置元素的内部和外部显示类型。将display设置为none会将元素从可访问性树中移除。
代码:
display : none按钮按钮
第二种:隐藏元素
visibility: hidden
将visibility设置为hidden会使元素不可见,但此时元素仍然位于可访问性树中(display: none时元素被移出可访问性树 ),注册点击事件无效。
代码:
visibility: hidden按钮按钮
第三种:透明
opacity: 0
opacity(不透明度),取值范围0(完全透明) ~ 1(完全不透明),将opacity设置为0会使元素完全透明,此时元素不可见(因为它是透明的),仍然位于可访问性树中,注册点击事件有效。
代码:
opacity: 0按钮按钮
transparent
将元素的background-color、color和border-color设置为transparent(透明),此时元素不可见(因为它是透明的),仍然位于可访问性树中,注册点击事件有效。
代码:
transparent按钮按钮
rgba(0,0,0,0)
从技术上说,transparent是 rgba(0,0,0,0) 的简写,将元素的background-color、color和border-color设置为rgba(0,0,0,0)(透明),此时元素不可见(因为它是透明的),仍然位于可访问性树中,注册点击事件有效。
代码:
rgba(0,0,0,0)按钮按钮
rgba只需要第四个参数为0即可达到隐藏元素的效果。
hsla(0,0%,0%,0)
hsla使用元素隐藏的机制与rgba一致,都是由第四个参数Alpha所控制的,将元素的background-color、color和border-color设置为hsla(0,0%,0%,0),此时元素不可见(因为它是透明的),仍然位于可访问性树中,注册点击事件有效。
代码:
hsla(0,0%,0%,0)按钮按钮
hsla和rgba一致,只需要第四个参数为0即可达到隐藏元素的效果。
filter: opacity(0%)
filter(滤镜) opacity(0% ~ 100%)转化图像的透明程度,值范围于0%(完全透明) ~ 100%(完全不透明)之间。将元素的filter设置为opacity(0%),此时元素不可见(因为它是透明的),仍然位于可访问性树中,注册点击事件有效。
代码:
filter: opacity(0%)按钮按钮
第四种:缩放
transform: scale(0, 0)
将transform设置为scale(0, 0)会使元素在x轴和y轴上都缩放到0像素,此元素会显示,也会占用位置,但是因为已经缩放到0%,元素和内容占用像素比为0*0,所以看不到此元素及其内容,也无法点击。
代码:
transform: scale(0, 0)按钮按钮
width: 0;height: 0;overflow: hidden
将width和height都设置为0,使元素占用像素比为0*0,但此时会出现两种情况:
当元素的display属性为inline时,元素内容会将元素宽高拉开;
当元素的display属性为block或inline-block时,元素宽高为0,但元素内容依旧正常显示,此时再加上overflow:hidden;即可裁剪掉元素外的元素内容。
这个方法跟transform: scale(0,0)的不同点在于:transform: scale(0,0)是将元素与内容都进行缩放,而此方法是将元素缩放到0px,再裁剪掉元素外的元素内容。
代码:
width: 0;height: 0;overflow: hidden按钮按钮
第五种:旋转
transform: rotateX(90deg)
将元素沿着X轴顺时针旋转90度达到隐藏元素的效果。
代码:
transform: rotateX(90deg)按钮按钮
transform: rotateY(90deg)
将元素沿着Y轴顺时针旋转90度达到隐藏元素的效果。
代码:
transform: rotateY(90deg)按钮按钮
第六种:脱离屏幕显示位置
脱离屏幕显示位置同样可以使元素不可见,但是达到这种效果的css样式太多了,这里只举例一种情况说明。
代码:
脱离屏幕显示位置按钮按钮
第七种:遮盖
使用元素遮盖也可以使元素不可见,因为达到这种效果的css样式也很多,故这里只举例一种情况说明。
代码:
遮盖按钮按钮
结尾
本人才疏学浅,出现错误之处,还望指出。
内容总结
以上是互联网集市为您收集整理的有趣的css—隐藏元素的7种思路全部内容,希望文章能够帮你解决有趣的css—隐藏元素的7种思路所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。