display:none与visibility:hidden比较

最新推荐文章于 2024-09-29 19:16:56 发布

会飞的犟驴

最新推荐文章于 2024-09-29 19:16:56 发布

阅读量243

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/sinat_39592712/article/details/112858802

css 专栏收录该内容

4 篇文章

订阅专栏

本文详细探讨了CSS中display:none和visibility:hidden属性的区别。display:none会使元素及其子孙元素完全不可见，影响布局并阻止事件处理，而visibility:hidden仅使元素不可见但保留其占用的空间，允许事件冒泡。此外，display变化会触发浏览器的reflow，而visibility变化则不会。同时，counter和transition对两者有不同的响应。内容还涉及CSS在表单提交和布局计算等方面的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                    父元素为 display: none，子孙元素页在劫难逃；父元素为 visibility: hidden，而子元素可以设置为 visibility:visible，并且生效
设置为 display:none 的元素和设置为 visibility:hidden 的元素都无法获取焦点
设置为 display:none 的元素无法响应任何事件，无论是捕获、命中目标和冒泡阶段均不可以；设置为 visibility:hidden 的元素可在冒泡阶段响应事件，因为设置为 visibility:hidden 的元素的子元素可以为 visibility:visible ，因此隐藏的元素有可能位于事件冒泡的路径上
设置为 display:none 的元素和设置为 visibility:hidden 的元素都不妨碍 form 表单的提交
CSS中的 counter 会忽略 display:none 的元素，不会忽略 visibility:hidden 的元素
transition 对 display 的变化不感冒，对 visibility 的变化有效
display 变化时将触发 reflow，且看 display:block 表示元素位于BFC中，而 display 则表示元素位于IFC中，也就是说 display 的作用就是设置元素所属的布局上下文，若修改 display 值则表示元素采用的布局方式已发生变化，必然触发 reflow；visibility 变化不会触发 reflow，由于 visbility 设置为 hidden 时，不会改变元素布局相关的属性，因此不会触发 reflow，只需要等待浏览器定时重绘界面