写点什么

聊聊 CSS 隐藏元素的 10 种实用方法

  • 2023-04-20
    广东
  • 本文字数:1011 字

    阅读完需:约 3 分钟

CSS 隐藏元素的方法你能说出来几种?


这是一个在 web 前端面试中可能常会提及的基础问题,聊这个话题不仅仅只是讨论“茴”字有几种写法,更是能从一个简单的问题中体现出你的 CSS 边界能力,本文提炼了十种最实用的方法,希望对你有所帮助。

常规方法

display: none;

结构消失,会触发回流重绘Reflow & Repaint)。

opacity: 0;

结构保留,占据空间,可以正常触发事件,因触发硬件加速所以不发生回流和重绘

visibility: hidden;

结构保留,占据空间,仅触发重绘,不会触发事件(无法选中)。

content-visibility: hidden;

设置元素内容可见性,设置的元素本身不受影响。hidden 隐藏效果与 display: none 类似,但实际浏览器只是跳过了内容的渲染,还保留着内容的渲染状态,性能上有优势。


注意:该属性目前还处于实验性阶段,使用时需要考虑浏览器兼容性问题。

逃逸视窗

position + left/top

利用绝对定位 position 设置 absolutefixed,同时 lefttop 设置 -9999px


超大负边距会将元素抛出视图,因为定位本身脱离了文档流所以不占据空间。

translate(-9999px)

利用偏移抛出视图,空间会占据,不过元素实际不在视窗内所以无法交互。


transform: translate(-9999px);
复制代码


注意:此方法对行内元素无效



这两种方法并不使元素本身消失,只是看不见了而已。

移行变换

scale(0) / skew(90deg)

通过 2D 变换来达到隐藏,占据空间,不可交互。


transform: scale(0);
transform: skew(90deg);
复制代码



注意:此方法对行内元素无效

circle(0px)

利用裁剪创建元素的可显示区域,区域外会隐藏,占据空间,不可交互(这里我用 circle 是因为它参数最少)


clip-path: circle(0px);
复制代码


z-index

层叠上下文在合适的情况下可以遮挡住元素,也算是一种隐藏方式。


压缩空间

height: 0; width: 0;

宽高都为 0 时不占据空间,不可交互。需要处理边距等样式,还需设置 overflow: hidden; 否则子元素可能不会隐藏,注意还会被display影响,所以这个方法本身并不实用,但是可以充分体现对盒模型的理解。


width: 0;height: 0;padding: 0;margin: 0;border: none;overflow: hidden;
复制代码


总结

或许还有其它“障眼法”可以让元素不可见,以上整理的十种方法都独具代表性,且比较实用。


以上就是文章的全部内容,感谢看到这里!本人知识水平有限,如有错误望不吝指正,如果觉得写得不错,对你有所帮助或启发,可以点赞收藏支持一下,也欢迎关注,我会更新更多实用的前端知识与技巧。我是茶无味de一天(公众号: 品味前端),希望与你共同成长~

发布于: 刚刚阅读数: 3
用户头像

公众号:品味前端 2022-09-22 加入

一介前端,卖码为生。很惭愧,只希望在学习和分享的道路上能做一点微小的贡献。

评论

发布
暂无评论
聊聊 CSS 隐藏元素的 10 种实用方法_CSS_茶无味的一天_InfoQ写作社区