CSS必看！display:none和visibility:hidden的区别，搞懂这两个属性就对了！

想要精通CSS？首先要搞懂`display: none`和`visibility: hidden`的区别！本文将深入浅出地解析这两个属性的差异，助你快速掌握它们在网页布局中的妙用。简单来说，`display: none`会使元素彻底从页面消失，不占据任何空间，适用于动态控制展示或布局变化较大的场景。而`visibility: hidden`只是让元素不可见，但仍占据原有空间，更适合保留布局结构或实现过渡动画。两者最关键的区别在于是否占位以及对文档流的影响。此外，父元素设置为`display: none`时，子元素无法通过`visibility: visible`显示，而`visibility: hidden`则允许子元素单独设置为可见。掌握这些差异，让你的CSS技巧更上一层楼！

display: none和visibility: hidden的主要区别在于元素是否占位及脱离文档流。1. display: none使元素完全不显示且不占位，脱离文档流，适用于动态控制展示或布局变化大的场景；2. visibility: hidden仅隐藏元素但仍占位，保留文档流位置，适用于保留布局结构或过渡动画场景；3. display: none的子元素无法通过visibility: visible显示，而visibility: hidden的子元素可单独设为可见。两者根据具体需求选择使用。

在CSS中，display: none和visibility: hidden都可以让元素“看不见”，但它们的行为方式有明显区别。简单来说，display: none会让元素彻底从页面布局中消失，而visibility: hidden只是隐藏了元素的显示，但它仍然占据原本的空间。

display: none：元素完全不显示并脱离文档流

使用display: none时，元素不仅不可见，还会被浏览器当作不存在一样处理。这意味着它不会占据任何空间，周围的元素会自动填补它的位置。

举个例子，如果你有一个按钮设置了display: none，那么这个按钮就不会出现在页面上，也不会影响布局。常用于需要动态控制某个区域是否展示的时候，比如菜单切换、弹窗关闭等。

常见用法：

• 动态隐藏或显示某个模块
• 移动端适配时隐藏PC端专属内容
• 配合JavaScript实现交互效果

需要注意的是，display: none会影响DOM结构的表现，某些依赖于元素尺寸或位置的脚本可能会因此出错。

visibility: hidden：隐藏元素但仍占位

与display: none不同，visibility: hidden只是让元素不可见，但它仍然保留在文档流中，保留原来的位置和大小。也就是说，页面布局不会发生变化。

比如你有一个红色方块设置了visibility: hidden，虽然你看不见它，但它所在的位置仍然是空着的，其他元素不会移动过来。

适用场景包括：

• 想保留布局结构但临时隐藏内容
• 制作动画过程中过渡状态
• 表格中某些单元格需要隐藏但不影响整体结构

一个常见的误区是以为这两个属性可以互换使用，其实它们对布局的影响完全不同。

两者的主要区别总结

还有一个小细节是，当父元素设为display: none时，其所有子元素都会被隐藏且无法通过设置visibility: visible来单独显示；而如果父元素是visibility: hidden，子元素是可以单独设为可见的。

基本上就这些。这两个属性各有用途，选择哪个要看具体需求。像布局变化大的时候用display: none更合适，而只想隐藏内容又不想打乱布局的话，visibility: hidden更稳妥。

终于介绍完啦！小伙伴们，这篇关于《CSS必看！display:none和visibility:hidden的区别，搞懂这两个属性就对了！》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！