您现在的位置是：探索 >>正文

html怎么隐藏内容

探索2965人已围观

简介用 `display: none` 藏东西，是前端开发里最常见的手法。但很多人不知道，这个属性一加上去，元素连占位空间都没了，就像从来没存在过一样。上周帮同事调一个表单，他死活找不到一个报错提示为什么 ...

用 `display: none` 藏东西，隐藏是内容前端开发里最常见的手法。但很多人不知道，隐藏这个属性一加上去，内容元素连占位空间都没了，隐藏就像从来没存在过一样。内容上周帮同事调一个表单，隐藏他死活找不到一个报错提示为什么消失，内容最后发现是隐藏父级容器被加上了 `display: none`，整块区域直接塌了。内容

如果你想让元素看不见但保留它占的隐藏那块地儿，得用 `visibility: hidden`。内容这俩区别挺关键的隐藏。举个例子，内容做轮播图的隐藏时候，非当前帧的图片如果用 `display: none`，整个布局会跳一下；换成 `visibility: hidden`，位置还在，只是内容透明了，过渡动画会顺滑很多。我自己的习惯是，只要涉及位置稳定的场景，优先考虑 `visibility`。

还有一种更隐蔽的藏法：`opacity: 0`。元素完全透明，但依然在那里，能点击、能触发事件。有人拿它做自定义复选框的原始 input，视觉上没了，功能还在。不过要小心，屏幕阅读器可能还会读到它，无障碍这块得额外处理。

说到无障碍，`aria-hidden="true"` 是专门给辅助技术看的。它不改变视觉呈现，只告诉读屏软件“忽略这块”。和 CSS 隐藏配合用，效果更好。比如一个纯装饰性的图标，用 `aria-hidden` 加上 `font-size: 0` 或者 `color: transparent`，既不影响布局，也不会被读出来。

HTML 里还有个老古董：`hidden` 属性。写 `