visibility 和 display 的区别

最新推荐文章于 2025-09-09 15:25:37 发布
原创 最新推荐文章于 2025-09-09 15:25:37 发布 · 1.6k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文探讨了CSS中两种隐藏元素的方法——display:none和visibility:hidden的区别。display:none会完全移除元素在页面布局中的占用空间，而visibility:hidden则保持元素在结构中的位置但不可见。此外，当父元素使用display:none隐藏时，其子元素无法通过设置display:block显示；而使用visibility:hidden的父元素，子元素仍可通过visibility:visible变为可见。

一、隐藏元素

  • 元素设置为 display: none; 时，元素隐藏，元素在结构中不占据位置。
  • 元素设置为 visibility: hidden; 时，元素隐藏，元素在结构中依旧占据位置。

二、对子元素的影响

  • 父元素设置为 display: none; 时，子元素设置 display: block; 无效。
  • 父元素设置为 visibility: hidden; 时，子元素设置 visibility: visible; 元素再次显示。
阿程_88
关注
CSS元素的显示与可见性（详解Display和Visibility的用法）
百赢出品，必属精品
05-03 5858
1.DisplayDisplay主要用于控制元素的布局方式，包括块级、行内、弹性布局和网格布局等。Visibility主要用于控制元素的可见性，即元素是否在页面中可见，但不影响布局。display属性display属性用于定义元素应该生成的框的类型。常见的display属性值包括：none: 元素不会被渲染在页面上，且不占据空间。block: 元素被渲染为块级元素，占据一整行。inline: 元素被渲染为内联元素，不会独占一行，与其他内联元素在一行内显示。
CSS中display和visibility的区别
低代码布道师的博客
10-31 704
在 CSS 中，display 和 visibility 是两个用于控制元素显示和布局的属性，但它们的作用和效果是不同的。
display和visibility的区别
Mrs_haining的博客
10-18 865
display通常可以设置为none、inline、block visibility通常可以设置为hidden、visible   当display为none，visibility为hidden时，元素都会不见。不过其还有不同之处。   display会将元素隐藏掉，并且位置不再被占据，而visibility则是占据原来的位置。 看例子即可明白：   [html] view
CSS布局完整指南：Display、Flex与Grid详解
最新发布
wtyv3164的博客
09-09 1996
Flexbox（弹性盒子布局）是CSS3中一种强大的布局方式，通过来启用。它让容器内的子元素能够灵活地排列、对齐和分配空间。CSS Grid是一个二维布局系统，通过启用。与Flexbox的一维布局不同，Grid可以同时控制行和列，创建复杂的网格结构。：定义列轨道的宽度：定义行轨道的高度具体尺寸（pxemrem等）百分比（，相对于容器尺寸）弹性单位fr（剩余空间分配，1fr表示占1份）auto（由内容决定尺寸）/* 定义3列，每列200px *//* 定义2行，每行100px */
visibility和display的区别
yanfeichening
12-09 136
以前没怎么注意，以为visibility和display只是用法不同，效果是一样的，直到遇着一个问题，并真正认真去琢磨，才认识到这两者的差异。 很久以前，我利用visibility做了个下拉菜单，当时可能菜单还比较短，反正当时没发现有啥问题，用着挺好的。另外，这也和它在IE中的正常表现有关，因为公司里同事们在工作时基本上都是用ie，即使用其它浏览器，发现有问题，也会直接就换成ie，而一般都不会向我...
visibility与display的区别：
jinlovo
01-08 6070
visibility与display之设置元素显隐的区别 在CSS里的visibility 属性，通常其值被设置成visible 或hidden。 visibility：hidden 相当于display：none，能把元素隐藏起来，但是两者的区别在于： display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘） visibility：hidden 隐藏对应元素，在...
JAVASCRIPT style 中visibility和display之间的区别
10-29
在style属性中，有两个常用的属性可以用来控制元素的显示与隐藏：visibility和display。尽管这两个属性的目的相似，即控制元素的可见性，但它们在实现上有着明显的区别，这些区别对页面布局和元素的交互性有深远的...
display和visibility的区别示例介绍
11-30
在网页布局和样式设计中，`display` 和 `visibility` 是两个非常重要的CSS属性，它们都能用来控制元素的可见性，但实现方式和效果大不相同。本篇文章将深入探讨两者之间的区别，并通过示例来具体说明。 首先，`...
display与visibility的区别
10-13
display与visibility的区别
display和visibility的用法和区别
weixin_30485291的博客
11-30 884
display和visibility的用法和区别 更多 2013/11/17 来源：css学习浏览量：892 学习标签： css display visibility 本文导读：大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。visibility和display两个属性都有隐藏元素的功能。visibility属性所...
display和visibility
小小的博客
08-26 414
display   visibility
visibility和display
Blog
09-10 370
visibility和display这两个属性很容易被混淆，比如它们看起来是干一样的事情，就是将让我们看不见元素。display通常可以设置为：none，inline，block visibility通常可以设置为：hidden，visibledisplay：none; visibility:hidden;这两条样式都能使得元素隐藏。但是，display会将元素掉，并且位置不再占用。而visibi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值