【字节】介绍 CSS 隐藏页面中某个元素的几种方法

科技   2023-11-14 22:54   广东  
皮埃尔丰城堡,皮卡第大区,法国
(© Hemis/Alamy)
01 display: none

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

displaynone;

02 opacity: 0

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

opacity: 0;

03 visibility: hidden

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

visibilityhidden;

04 content-visibility

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

content-visibilityhidden;

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

positionabsolute;
top-9000px;
left-9000px;

06 字体大小设置为 0

font-size: 0;

算法猫叔
程序员:进一寸有一寸的欢喜
 最新文章