CSS隐藏元素的10种方法 _CSS隐藏元素

本文概述

动画
辅助功能
事件处理
性能
1.不透明度和过滤器：opacity()
2.彩色Alpha透明度
3.转换
4.剪切路径
5.能见度
6.展示
7. HTML隐藏属性
8.绝对位置
9.覆盖另一个元素
10.缩小尺寸
隐藏的选择

在CSS中隐藏元素有多种方法, 但是它们影响可访问性, 布局, 动画, 性能和事件处理的方式不同。
动画一些CSS隐藏选项全部或全部消失。元素完全可见或完全不可见, 并且没有中间状态。其他值（例如透明度）可以具有一定范围的值, 因此插值CSS动画成为可能。
辅助功能下文所述的每种方法将在视觉上隐藏元素, 但它可能会或可能不会隐藏辅助技术中的内容。例如, 屏幕阅读器仍可以宣布微小的透明文本。可能需要其他CSS属性或ARIA属性（例如aria-hidden =“ true”）来描述适当的操作。
警惕动画还会对某些人造成迷失方向, 偏头痛, 癫痫发作或其他身体不适。当在用户首选项中指定时, 请考虑使用“喜好运动减少”媒体查询来关闭动画。
事件处理隐藏将停止在该元素上触发事件或将其无效-即, 该元素不可见, 但仍可以单击或接收其他用户交互。
性能浏览器加载并解析HTML DOM和CSS对象模型后, 页面将分三个阶段呈现：

布局：生成每个元素的几何形状和位置
涂料：画出每个元素的像素
组成: 按适当的顺序放置元素层

仅引起构图变化的效果比影响布局的效果明显更平滑。在某些情况下, 浏览器还可以使用硬件加速。
1.不透明度和过滤器：opacity()可以将opacity：N和filter：opacity（N）属性传递给介于0和1之间的数字, 或者传递介于0％和100％之间的百分比, 以表示完全透明和完全不透明。
请参见具有不透明性的钢笔隐藏：由CodePen上的SitePoint（@SitePoint）设置为0。
两者在现代浏览器中几乎没有实际区别, 尽管如果同时应用多种效果（模糊, 对比度, 灰度等）, 则应使用过滤器。
不透明度可以设置动画效果并提供出色的性能, 但请注意页面上仍保留完全透明的元素并可以触发事件。

公制	影响
浏览器支持	很好, 但是IE仅支持不透明度0到1
accessibility	如果设置为0或0％, 则无法读取内容
布局受影响吗？	no
需要渲染	composition
performance	最好, 可以使用硬件加速
动画帧可能吗？	yes
隐藏时触发事件？	yes

2.彩色Alpha透明度不透明度会影响整个元素, 但也可以分别设置颜色, 背景颜色和边框颜色属性。使用rgba（0, 0, 0, 0）或类似方法应用零Alpha通道可使项目完全透明：
在CodePen上查看由SitePoint（@SitePoint）使用颜色为Alpha的笔隐藏物。
每个属性可以单独设置动画以创建有趣的效果。请注意, 除非使用线性渐变或类似方法生成具有图片背景的元素, 否则无法将其应用于透明背景。
可以通过以下方式设置Alpha通道：

透明的：完全透明的（中间动画是不可能的）
rgba（r, g, b, a）：红色, 绿色, 蓝色和Alpha
hsla（h, s, l, a）：色相, 饱和度, 亮度和alpha
#RRGGBBAA和#RGBA

公制	影响
browser support	很好, 但是IE仅支持透明和rgba
accessibility	内容仍读
layout affected?	no
rendering required	painting
performance	很好, 但不如不透明
动画帧可能吗？	yes
隐藏时触发事件？	yes

3.转换transform属性可用于平移（移动）, 缩放, 旋转或倾斜元素。屏幕外缩放（0）或平移（-999px, 0px）将隐藏元素：
请参阅带有转换的笔隐藏：scale（0）; 由SitePoint（@SitePoint）在CodePen上创建。
变换可提供出色的性能和硬件加速, 因为该元素可以有效地移动到单独的图层中, 并且可以2D或3D进行动画处理。原始布局空间保持不变, 但是完全隐藏的元素不会触发任何事件。

公制	影响
browser support	good
accessibility	内容仍读
布局受影响吗？	否-保留原始尺寸
需要渲染	composition
performance	最好, 可以使用硬件加速
动画帧可能吗？	yes
隐藏时触发事件？	no

4.剪切路径clip-path属性创建一个裁剪区域, 该裁剪区域确定元素的哪些部分可见。使用诸如clip-path的值：circle（0）; 将完全隐藏该元素。
在CodePen上查看带有SitePath（@SitePoint）的带剪切路径的笔隐藏。
剪贴路径为有趣的动画提供了范围, 尽管仅在现代浏览器中应使用它。

公制	影响
浏览器支持	仅现代浏览器
accessibility	内容仍被某些应用程序读取
布局受影响吗？	否-保留原始尺寸
rendering required	paint
performance	reasonable
动画帧可能吗？	是的, 在现代浏览器中
隐藏时触发事件？	no

5.能见度可见性属性可以设置为visible或hidden以显示和隐藏元素：
请参阅具有可见性的笔隐藏：由CodePen上的SitePoint（@SitePoint）隐藏。
除非使用折叠值, 否则元素使用的空间将保持不变。

公制	影响
browser support	excellent
accessibility	内容未读
布局受影响吗？	不, 除非使用了崩溃
rendering required	合成, 除非使用崩溃
performance	good
动画帧可能吗？	no
隐藏时触发事件？	no

6.展示显示可能是最常用的元素隐藏方法。值为none会有效删除元素, 就好像它在DOM中不存在一样。
请参阅带有显示的笔隐藏：CodePen上的SitePoint（@SitePoint）没有显示。
但是, 在大多数情况下, 它可能是最差的CSS属性。除非该元素使用以下位置移出文档流, 否则它将无法设置动画, 并会触发页面布局：绝对或采用新的contains属性。
显示也过载, 包括块, 内联, 表格, flexbox, 网格等选项。显示后重置为正确的值：无；可能会有问题（尽管未设置可能有所帮助）。

公制	影响
浏览器支持	excellent
accessibility	内容未读
layout affected?	yes
需要渲染	layout
performance	poor
动画帧可能吗？	no
隐藏时触发事件？	no

7. HTML隐藏属性HTML隐藏属性可以添加到任何元素：

< p hidden> Hidden content < /p>

应用浏览器的默认样式：

[hidden] { display: none; }

它具有与显示相同的优点和缺点：无, 但在使用不允许样式更改的内容管理系统时很有用。
8.绝对位置position属性允许元素使用顶部, 底部, 左侧和右侧从页面布局中的默认静态位置移动。因此, 绝对位置的元素可以在屏幕外向左移动-999px或类似位置：
在CodePen上查看具有以下位置的笔隐藏：SitePoint（@SitePoint）的绝对位置。

公制	影响
browser support	优秀, 除非使用位置：粘性
accessibility	内容仍读
layout affected?	是的, 如果位置改变了
rendering required	depends
performance	如果谨慎合理
动画帧可能吗？	是的, 在顶部, 底部, 左侧和右侧
隐藏时触发事件？	是的, 但是可能无法与屏幕外元素互动

9.覆盖另一个元素通过在顶部放置与背景颜色相同的颜色, 可以在视觉上隐藏一个元素。在此示例中, 尽管可以使用任何子元素, 但::: after伪元素会被覆盖：
在CodePen上查看带有SitePoint（@SitePoint）覆盖的笔隐藏物。
尽管在技术上可行, 但此选项比其他选项需要更多的代码。

公制	影响
browser support	excellent
accessibility	内容仍读
layout affected?	不, 如果绝对定位
需要渲染	paint
performance	如果谨慎合理
动画帧可能吗？	yes
隐藏时触发事件？	是的, 当伪元素或子元素覆盖时

10.缩小尺寸通过使用宽度, 高度, 填充, 边框宽度和/或字体大小来最小化元素的尺寸, 可以隐藏元素。可能还需要应用溢出：隐藏；以确保内容不会溢出。
在CodePen上查看带有SitePoint（@SitePoint）宽度或高度的钢笔皮。
有趣的动画效果是可能的, 但是变换效果明显更好。

公制	影响
browser support	excellent
accessibility	内容仍读
布局受影响吗？	yes
rendering required	layout
performance	poor
动画帧可能吗？	yes
隐藏时触发事件？	no

隐藏的选择display：多年来, 没有一种是隐藏元素的首选解决方案, 但是它已被更灵活, 可设置动画的选项所取代。它仍然有效, 但可能仅在你要向所有用户永久隐藏内容时才有效。考虑性能时, transform或opacity是更好的选择。
【CSS隐藏元素的10种方法】使用CSS Master将你的CSS技能提升到一个新的水平。了解CSS架构, 调试, 自定义属性, 高级布局和动画技术, 如何将CSS与SVG结合使用等。