开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情
6. Display
Display可能是最常用的元素隐藏方法。值为none可以有效地删除元素，就好像它从未存在于DOM中一样。
然而，在大多数情况下，它可能是最糟糕的CSS属性。它不能被动画化，并且将触发页面布局，除非使用position: absolute将元素移出文档流或采用新的包含属性。
显示也重载，如块，内联，表，flexbox，网格等选项。显示后复位到正确值:无;可能会有问题(尽管取消设置可能会有所帮助)。
| 度规 | 效果 |
|---|---|
| 浏览器支持 | 优秀的 |
| 可访问性 | 未读内容 |
| 布局的影响? | 是的 |
| 渲染需要 | 布局 |
| 性能 | 可怜的 |
| 动画帧可能吗? | 没有 |
| 事件触发时隐藏? | 没有 |
7.HTML hidden attribute
HTML隐藏属性可以添加到任何元素:
<p hidden>
Hidden content
</p>
应用浏览器的默认样式:
[hidden] {
display: none;
}
这与显示有相同的优点和缺点:没有，尽管在使用不允许样式更改的内容管理系统时可能有用。
8. Absolute position
position属性允许在页面布局中使用顶部、底部、左侧和右侧将元素从其默认静态位置移动。因此，绝对位置的元素可以向左移动到屏幕外:-999px或类似的值:
| 度规 | 效果 |
|---|---|
| 浏览器支持 | 很好，除非使用位置:粘性 |
| 可访问性 | 内容仍可阅读 |
| 布局的影响? | 是的，如果位置改变了 |
| 渲染需要 | 取决于 |
| 性能 | 合理但谨慎 |
| 动画帧可能吗? | 是的,在前，底，左,正确的 |
| 事件触发时隐藏? | 是的，但它可能不可能与屏幕外的元素交互 |
9. 叠加另一个元素
一个元素可以通过将另一个与背景颜色相同的元素置于顶部来视觉上隐藏。在这个例子中，伪元素后的::被覆盖，尽管任何子元素都可以使用:
虽然技术上可行，但这个选项需要比其他选项更多的代码。
| 度规 | 效果 |
|---|---|
| 浏览器支持 | 优秀的 |
| 可访问性 | 内容仍可阅读 |
| 布局的影响? | 不，如果完全定位的话 |
| 渲染需要 | 油漆 |
| 性能 | 合理但谨慎 |
| 动画帧可能吗? | 是的 |
| 事件触发时隐藏? | 是的，当伪元素或子元素被覆盖时 |
10. 减少尺寸
一个元素可以通过使用宽度、高度、填充、边框宽度和/或字体大小来最小化其尺寸来隐藏。可能还需要应用overflow: hidden;确保内容不会泄露出去。
有趣的动画效果是可能的，但性能明显更好的转换。
| 度规 | 效果 |
|---|---|
| 浏览器支持 | 优秀的 |
| 可访问性 | 内容仍可阅读 |
| 布局的影响? | 是的 |
| 渲染需要 | 布局 |
| 性能 | 可怜的 |
| 动画帧可能吗? | 是的 |
| 事件触发时隐藏? | 没有 |
