极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。
每天晚上九点 B站讲解前端工程化直播,并解答相关问题。

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

Issue

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

Author

回答者: borgle (opens new window)

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

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

# 01 display: none

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

display: none;

# 02 opacity: 0

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

opacity: 0;

# 03 visibility: hidden

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

visibility: hidden;

# 04 content-visibility

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

content-visibility: hidden;

# 05 绝对定位于当前页面的不可见位置

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

# 06 字体大小设置为 0

font-size: 0;
Last Updated: 11/27/2021, 10:11:48 AM