# 介绍 CSS 隐藏页面中某个元素的几种方法

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 452 (opens new window)

Author

CSS 方法一： display:none CSS 方法二： position:absolute;top:-1000px;left:-1000px;

Author

更多的隐藏方案可查看: 10 Ways to Hide Elements in CSS (opens new window)

# 01 display: none

通过 CSS 操控 display，移出文档流

display: none;

透明度为 0，仍在文档流中，当作用于其上的事件(如点击)仍有效

opacity: 0;

透明度为 0，仍在文档流中，但作用于其上的事件(如点击)无效，这也是 visibility:hidden 与 opacity: 0 的区别

visibility: hidden;

移出文档流，但是再次显示时消耗性能低

content-visibility: hidden;

position: absolute;
top: -9000px;
left: -9000px;

font-size: 0;