5种css隐藏元素的方法_在CSS中隐藏元素的10种方法

5种css隐藏元素的方法

There are multiple ways to hide an element in CSS, but they differ in the way they affect accessibility, layout, animation, performance, and event handling.

在CSS中隐藏元素有多种方法，但是它们影响可访问性，布局，动画，性能和事件处理的方式不同。

动画 (Animation)

Some CSS hiding options are all or nothing. The element is either fully visible or fully invisible and there’s no in-between state. Others, such as transparency, can have a range of values, so interpolated CSS animations become possible.

一些CSS隐藏选项全部或全部消失。 该元素是完全可见的或完全不可见的，并且没有中间状态。 其他值(例如透明度)可以具有一定范围的值，因此插值CSS动画成为可能。

辅助功能 (Accessibility)

Each method described below will visually hide an element, but it may or may not hide the content from assistive technologies. For example, a screen reader could still announce tiny transparent text. Further CSS properties or ARIA attributes such as aria-hidden="true" may be necessary to describe the appropriate action.

下文所述的每种方法都将在视觉上隐藏元素，但是它可能会或可能不会隐藏辅助技术中的内容。 例如，屏幕阅读器仍可以宣布微小的透明文本。 可能需要其他CSS属性或ARIA属性(例如aria-hidden="true"来描述适当的操作。

Be wary that animations can also cause disorientation, migraines, seizures, or other physical discomfort for some people. Consider using a prefers-reduced-motion media query to switch off animations when specified in user preferences.

警惕动画还会对某些人造成迷失方向，偏头痛，癫痫发作或其他身体不适。 考虑在用户首选项中指定时，使用“偏好prefers-reduced-motion媒体查询来关闭动画。

事件处理 (Event Handling)

Hiding will either stop events being triggered on that element or have no effect — that is, the element is not visible but can still be clicked or receive other user interactions.

隐藏将停止在该元素上触发事件或将其无效-即，该元素不可见，但仍可以单击或接收其他用户交互。

性能 (Performance)

After a browser loads and parses the HTML DOM and CSS object model, the page is rendered in three stages:

浏览器加载并解析HTML DOM和CSS对象模型后，页面将分三个阶段呈现：

1. Layout: generate the geometry and position of each element

   布局：生成每个元素的几何形状和位置

2. Paint: draw out the pixels for each element

   绘制：绘制每个元素的像素

3. Composition: position element layers in the appropriate order

   组成 ：以适当的顺序放置元素图层

An effect which only causes composition changes is noticeably smoother than those affecting layout. In some cases, the browser can also use hardware acceleration.

仅引起构图变化的效果比影响布局的效果明显更平滑。 在某些情况下，浏览器还可以使用硬件加速。

1. opacity和filter: opacity() (1. opacity and filter: opacity())

The opacity: N and filter: opacity(N) properties can be passed a number between 0 and 1, or a percentage between 0% and 100% denoting fully transparent and fully opaque accordingly.

可以将opacity: N和filter: opacity(N)属性传递给介于0和1之间的数字，或者传递介于0％和100％之间的百分比，以表示完全透明和完全不透明。

See the Pen hide with opacity: 0 by SitePoint (@SitePoint) on CodePen.

请参见CodePen上的SitePoint ( @SitePoint ) 将不透明的笔隐藏起来：0 。

There’s little practical difference between the two in modern browsers, although filter should be used if multiple effects are applied at the same time (blur, contrast, grayscale etc.)

两者在现代浏览器中几乎没有实际区别，尽管如果同时应用多种效果(模糊，对比度，灰度等)，则应使用filter 。

Opacity can be animated and offers great performance, but be wary that a fully transparent element remains on the page and can trigger events.

不透明度可以设置动画效果并提供出色的性能，但请注意页面上仍保留完全透明的元素并可以触发事件。

metric	effect
browser support	good, but IE only supports opacity 0 to 1
accessibility	content not read if 0 or 0% is set
layout affected?	no
rendering required	composition
performance	best, can use hardware acceleration
animation frames possible?	yes
events triggered when hidden?	yes

公制	影响
浏览器支持	很好，但是IE仅支持opacity 0到1
可及性	如果设置为0或0％，则无法读取内容
布局受影响吗？	没有
需要渲染	组成
性能	最好，可以使用硬件加速
动画帧可能吗？	是
隐藏时触发事件？	是

2. color Alpha透明度 (2. color Alpha Transparency)

opacity affects the whole element, but it’s also possible to set the color, background-color, and border-color properties separately. Applying a zero alpha channel using rgba(0,0,0,0) or similar renders an item fully transparent:

opacity会影响整个元素，但是也可以分别设置color ， background-color和border-color属性。 使用rgba(0,0,0,0)或类似方法应用零alpha通道将使项目完全透明：

See the Pen hide with color alpha by SitePoint (@SitePoint) on CodePen.

在CodePen上查看由SitePoint( @SitePoint )的颜色为Alpha的笔隐藏 物 。

Each property can be animated separately to create interesting effects. Note that transparency can’t be applied to elements with image backgrounds unless they’re generated using linear-gradient or similar.

每个属性可以单独设置动画以创建有趣的效果。 请注意，除非使用linear-gradient或类似方法生成透明元素，否则不能将其应用于具有图像背景的元素。

The alpha channel can be set with:

可以使用以下方式设置Alpha通道：

• transparent: fully transparent (in-between animations are not possible)

  transparent ：完全透明的(中间动画是不可能的)

• rgba(r, g, b, a): red, green, blue, and alpha

  rgba(r, g, b, a) ：红色，绿色，蓝色和Alpha

• hsla(h, s, l, a): hue, saturation, lightness, and alpha

  hsla(h, s, l, a) ：色相，饱和度，亮度和alpha

• #RRGGBBAA and #RGBA

  #RRGGBBAA和#RGBA

metric	effect
browser support	good, but IE only supports transparent and rgba
accessibility	content still read
layout affected?	no
rendering required	painting
performance	good, but not as fast as opacity
animation frames possible?	yes
events triggered when hidden?	yes

公制	影响
浏览器支持	很好，但是IE仅支持transparent和rgba
可及性	内容仍在阅读
布局受影响吗？	没有
需要渲染	绘画
性能	很好，但不如opacity
动画帧可能吗？	是
隐藏时触发事件？	是

3. transform (3. transform)

The transform property can be used to translate (move), scale, rotate, or skew an element. A scale(0) or translate(-999px, 0px) off-screen will hide the element:

transform属性可用于平移(移动)，缩放，旋转或倾斜元素。 屏幕外scale(0)或translate(-999px, 0px)将隐藏元素：

See the Pen hide with transform: scale(0); by SitePoint (@SitePoint) on CodePen.

请参见带有转换的笔隐藏：scale(0); 通过SitePoint( @SitePoint上) CodePen 。

transform offers excellent performance and hardware acceleration because the element is effectively moved into a separate layer and can be animated in 2D or 3D. The original layout space remains as is, but no events will be triggered by a fully hidden element.

transform可提供出色的性能和硬件加速，因为该元素可以有效地移动到单独的图层中，并且可以2D或3D进行动画处理。 原始布局空间保持不变，但是完全隐藏的元素不会触发任何事件。

metric	effect
browser support	good
accessibility	content still read
layout affected?	no — the original dimensions remain
rendering required	composition
performance	best, can use hardware acceleration
animation frames possible?	yes
events triggered when hidden?	no

公制	影响
浏览器支持	好
可及性	内容仍在阅读
布局受影响吗？	否-保留原始尺寸
需要渲染	组成
性能	最好，可以使用硬件加速
动画帧可能吗？	是
隐藏时触发事件？	没有

4. clip-path (4. clip-path)

The clip-path property creates a clipping region that determines which parts of an element are visible. Using a value such as clip-path: circle(0); will completely hide the element.

clip-path属性创建一个裁剪区域，该裁剪区域确定元素的哪些部分可见。 使用诸如clip-path: circle(0);的值clip-path: circle(0); 将完全隐藏该元素。

See the Pen hide with clip-path by SitePoint (@SitePoint) on CodePen.

见笔隐藏与剪辑路径由SitePoint( @SitePoint )上CodePen 。

clip-path offers scope for interesting animations, although it should only be relied on in modern browsers.

clip-path为有趣的动画提供了范围，尽管仅在现代浏览器中应使用它。

metric	effect
browser support	modern browsers only
accessibility	content still read by some applications
layout affected?	no — the original dimensions remain
rendering required	paint
performance	reasonable
animation frames possible?	yes, in modern browsers
events triggered when hidden?	no

公制	影响
浏览器支持	仅现代浏览器
可及性	内容仍被某些应用程序读取
布局受影响吗？	否-保留原始尺寸
需要渲染	涂料
性能	合理
动画帧可能吗？	是的，在现代浏览器中
隐藏时触发事件？	没有

5. visibility (5. visibility)

The visibility property can be set to visible or hidden to show and hide an element:

visibility属性可以设置为visible或hidden以显示和隐藏元素：

See the Pen hide with visibility: hidden by SitePoint (@SitePoint) on CodePen.

请参阅具有可见性的笔隐藏：由CodePen上的SitePoint( @SitePoint ) 隐藏 。

The space used by the element remains in place unless a collapse value is used.

除非使用collapse值，否则元素使用的空间将保持不变。

metric	effect
browser support	excellent
accessibility	content not read
layout affected?	no, unless collapse is used
rendering required	composition, unless collapse is used
performance	good
animation frames possible?	no
events triggered when hidden?	no

公制	影响
浏览器支持	优秀的
可及性	内容未读
布局受影响吗？	不，除非使用了collapse
需要渲染	合成，除非使用collapse
性能	好
动画帧可能吗？	没有
隐藏时触发事件？	没有

6. display (6. display)

display is probably the most-used element-hiding method. A value of none effectively removes the element as if it never existed in the DOM.

display可能是最常用的元素隐藏方法。 值为none有效删除元素，就好像它在DOM中不存在一样。

See the Pen hide with display: none by SitePoint (@SitePoint) on CodePen.

请参阅带有显示的笔隐藏： CodePen上的SitePoint ( @SitePoint ) 没有显示 。

However, it’s possibly the worst CSS property to use in the majority of cases. It can’t be animated and will trigger a page layout unless the element is moved out of the document flow using position: absolute or the new contain property is adopted.

但是，在大多数情况下，它可能是最差CSS属性。 除非将元素使用position: absolute或采用新的contain属性从文档流中移出，否则它将不能设置动画，并会触发页面布局。

display is also overloaded, with options such as block, inline, table, flexbox, grid and more. Resetting back to the correct value after display: none; can be problematic (although unset may help).

display也会过载，包括block ， inline ， table ， flexbox ， grid等选项。 display: none;后重置为正确的值display: none; 可能会有问题(尽管未unset可能会有所帮助)。

metric	effect
browser support	excellent
accessibility	content not read
layout affected?	yes
rendering required	layout
performance	poor
animation frames possible?	no
events triggered when hidden?	no

公制	影响
浏览器支持	优秀的
可及性	内容未读
布局受影响吗？	是
需要渲染	布局
性能	较差的
动画帧可能吗？	没有
隐藏时触发事件？	没有

7. HTML hidden属性 (7. HTML hidden attribute)

The HTML hidden attribute can be added to any element:

可以将HTML hidden属性添加到任何元素：

<p hidden>
  Hidden content
</p>

to apply the browser’s default style:

应用浏览器的默认样式：

[hidden] {
  display: none;
}

This has the same benefits and flaws as display: none, although it could be useful when using a content management system that doesn’t permit style changes.

它具有与display: none相同的优点和缺点display: none ，尽管在使用不允许样式更改的内容管理系统时可能很有用。

8.绝对position (8. Absolute position)

The position property allows an element to be moved from its default static position within the page layout using top, bottom, left, and right. An absolute-positioned element can therefore be moved off-screen with left: -999px or similar:

position属性允许元素使用top ， bottom ， left和right从页面布局中的默认static位置移动。 因此， absolute位置的元素可以在屏幕外left: -999px移动left: -999px或类似位置：

See the Pen hide with position: absolute by SitePoint (@SitePoint) on CodePen.

请参阅位置为笔的皮革：位置是CodePen上的SitePoint( @SitePoint ) 绝对 。

metric	effect
browser support	excellent, unless using position: sticky
accessibility	content still read
layout affected?	yes, if positioning is changed
rendering required	depends
performance	reasonable if careful
animation frames possible?	yes, on top, bottom, left, and right
events triggered when hidden?	yes, but it may be impossible to interact with an off-screen element

公制	影响
浏览器支持	优秀，除非使用position: sticky
可及性	内容仍在阅读
布局受影响吗？	是的，如果位置改变了
需要渲染	要看
性能	如果谨慎合理
动画帧可能吗？	是的，在top ， bottom ， left和right
隐藏时触发事件？	是的，但是可能无法与屏幕外元素互动

9.覆盖另一个元素 (9. Overlay Another Element)

An element can be visually hidden by positioning another over the top which has the same color as the background. In this example, an ::after pseudo-element is overlaid, although any child element could be used:

通过将另一个元素放置在顶部具有与背景相同的颜色，可以在视觉上隐藏该元素。 在此示例中，尽管可以使用任何子元素，但会覆盖::after伪元素：

See the Pen hide with an overlay by SitePoint (@SitePoint) on CodePen.

在CodePen上看到 带有 SitePoint( @SitePoint ) 覆盖的笔隐藏 物 。

While technically possible, this option required more code than other options.

尽管在技术上可行，但此选项比其他选项需要更多的代码。

metric	effect
browser support	excellent
accessibility	content still read
layout affected?	no, if absolutely positioned
rendering required	paint
performance	reasonable if careful
animation frames possible?	yes
events triggered when hidden?	yes, when a pseudo or child element is overlaid

公制	影响
浏览器支持	优秀的
可及性	内容仍在阅读
布局受影响吗？	不，如果绝对定位
需要渲染	涂料
性能	如果谨慎合理
动画帧可能吗？	是
隐藏时触发事件？	是的，当覆盖伪或子元素时

10.缩小尺寸 (10. Reduce Dimensions)

An element can be hidden by minimizing its dimensions using width, height, padding, border-width and/or font-size. It may also be necessary to apply overflow: hidden; to ensure content doesn’t spill out.

可以通过使用width ， height ， padding ， border-width和/或font-size最小化元素的尺寸来隐藏元素。 可能还需要应用overflow: hidden; 确保内容不会溢出。

See the Pen hide with width or height by SitePoint (@SitePoint) on CodePen.

看到笔隐藏与宽度或高度由SitePoint( @SitePoint上) CodePen 。

Interesting animated effects are possible, but performance is noticeably better with transform.

有趣的动画效果是可能的，但是transform性能明显更好。

metric	effect
browser support	excellent
accessibility	content still read
layout affected?	yes
rendering required	layout
performance	poor
animation frames possible?	yes
events triggered when hidden?	no

公制	影响
浏览器支持	优秀的
可及性	内容仍在阅读
布局受影响吗？	是
需要渲染	布局
性能	较差的
动画帧可能吗？	是
隐藏时触发事件？	没有

隐藏的选择 (Hidden Choices)

display: none has been the favorite solution to hide elements for many years, but it’s been superseded by more flexible, animatable options. It’s still valid, but perhaps only when you want to permanently hide content from all users. transform or opacity are better choices when considering performance.

display: none多年来， display: none是隐藏元素的最喜欢的解决方案，但是它已被更灵活，可设置动画的选项所取代。 它仍然有效，但可能仅在您要向所有用户永久隐藏内容时才有效。 考虑性能时， transform或opacity是更好的选择。

Take your CSS skills to the next level with CSS Master. Learn CSS architecture, debugging, custom properties, advanced layout and animation techniques, how to use CSS with SVG, and more.

使用CSS Master将您CSS技能提升到一个新的水平。 了解CSS架构，调试，自定义属性，高级布局和动画技术，如何将CSS与SVG结合使用等。

翻译自: https://www.sitepoint.com/hide-elements-in-css/

5种css隐藏元素的方法