实现在页面上隐藏某个元素的css,有趣的css—隐藏元素的7种思路

display、visibility、opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题。

除了display、visibility、opacity三个属性可以隐藏元素之外，是否还存在其它属性可以隐藏元素呢？

它们之间又存在什么必然的联系呢？

这就是我们今天要讨论的问题css隐藏元素的7种思路

前言

display、visibility、opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题。属性值是否在页面上显示注册点击事件是否有效是否存在于可访问性树中displaynone否否否

visibilityhidden否否是

opacity0否是是

除了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样式也很多，故这里只举例一种情况说明。

代码：遮盖按钮按钮

结尾

本人才疏学浅，出现错误之处，还望指出。