display:none;与visibility:hidden;的区别

最新推荐文章于 2025-08-28 11:34:12 发布
原创 最新推荐文章于 2025-08-28 11:34:12 发布 · 80 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#display #none #visibility #hidden #区别

-

[color=brown][b]display[/b][/color]:none; [color=green]不显示元素，元素不占据任何空间。[/color]
[color=brown][b]visibility[/b][/color]:hidden; [color=green]不显示元素，但元素仍占据空间。[/color]


-
css元素隐藏原理及display:none和visibility:hidden
09-22
在介绍了这么多隐藏元素的方法之后，我们要特别注意display:none和visibility:hidden两种属性的主要区别。这两者之间的差异主要表现在以下几个方面： 1. 空间占据：display:none;隐藏的元素不占据任何布局空间，而...
【前端】display:none和visibility:hidden两者的区别
努力才是唯一的入场券。
06-05 8276
【前端】display:none和visibility:hidden两者的区别
【CSS 面经】display:none 与 visibility:hidden 的区别
lph159的博客
12-10 1276
特性元素是否从页面流中移除是，元素完全移除，页面布局重新计算否，元素仍然占据原来的位置元素是否响应用户交互否，元素完全消失，无法响应任何交互否，元素不可见，但仍然可以响应交互（如点击事件）对布局的影响会改变页面布局，后续元素会填充空白不会改变布局，元素仍然占据空间性能影响因为重新计算了布局，性能影响较大性能影响较小，只是隐藏元素应用场景适用于完全移除元素，且不希望它对页面布局产生任何影响适用于隐藏元素，但保留其占用的空间，如悬浮菜单是否占用空间不占用任何空间仍然占用空间。
display：none和visibility：hidden的区别
2301_81192892的博客
03-09 404
如果只是想让元素不可见，但仍要保留其在页面中的位置，并且可能需要使用过渡效果或希望屏幕阅读器能够读取其内容等情况，通常使用。在实际应用中，如果需要完全隐藏元素且不希望它占据空间，也不需要过渡效果等，可以使用。
CSS隐藏元素：display:none vs visibility:hidden
HTTP404_CN的博客
07-16 649
display: none和visibility: hidden是CSS中隐藏元素的两种方式，但存在本质区别。display: none会完全移除元素，不占布局空间，触发重排且不支持动画；而visibility: hidden保留元素空间，仅触发重绘，支持动画效果且子元素可单独显示。前者适用于需要彻底移除元素的场景，后者适合需要保留布局或实现动画的情况。
display:none和visibility:hidden的区别
weixin_45799605的博客
05-25 128
display:none和visibility:hidden的区别
display: none与visibility: hidden的区别
qq_43940172的博客
04-11 764
1. visibility具有继承性，给⽗元素设置visibility:hidden;⼦元素也会继承这个属 性。但是如果重新给⼦元素设置visibility: visible,则⼦元素⼜会显示出来。这个 和display: none有着质的区别 2. visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让⼀ 个元素不⻅了，但是其计数器仍在运⾏。这和display: none完全不⼀样 3.display;none表示直接消失 代码演示 c
display:none与visibility的区别
weixin_46369590的博客
04-02 269
面试题之：display: none 和 visibility: hidden 的区别
xiaoxin_040112的博客
08-28 1031
CSS中display:none和visibility:hidden都能隐藏元素，但存在关键区别：1) display:none不占空间且完全移除元素，会触发重排；visibility:hidden保留空间仅隐藏内容，仅触发重绘；2) display:none的元素不可交互，子元素也无法显示；visibility:hidden的元素仍可响应JS事件，子元素可单独显示；3) 性能上前者开销更大，后者更优；4) 前者适合彻底隐藏元素（如弹窗），后者适合保留占位的场景（如加载动画）。无障碍访问方面，两者都不推荐用
css display：none和visibility：hidden的区别
郑老狗要推动人类发展
04-01 319
css display：none和visibility：hidden的区别
display:none和visibility:hidden区别
m0_47013706的博客
04-06 510
display:none和visibility：hidden区别
display:none和visibility:hidden的差别比较与演示代码
01-19
前言： 在使用css隐藏栏位或物件的时候， 常常会使用到display:none和visibility:hidden这两个属性， 但却很容易分不清楚这两个的差别， 或是乾脆同时使用两种属性，来确保物件一定被隐藏， 其实我们可以很简单的来...
css之去掉li标签前面的符号
iteye_3352的博客
01-05 1828
[b]css:[/b] ul{ list-style-type: none; } [b]html:[/b] cafe bread milk -
CSS - li 元素显示在一行____ a 元素没有下横线
iteye_3352的博客
05-27 1681
原文链接： [url=http://www.w3schools.com/css/css_navbar.asp]http://www.w3schools.com/css/css_navbar.asp[/url] [color=indigo][size=x-large][b]方法一： 用于水平导航栏： [/b][/size][/color] [code="javascript"] ...
页面带标签的文字及样式 - Tag - css
iteye_3352的博客
04-01 1288
[img]http://dl2.iteye.com/upload/attachment/0116/2705/db428d73-ceb6-3175-803d-fe5fbaa12356.png[/img] --
CSS样式之带边框的 Anchor（超链接）
iteye_3352的博客
10-08 1004
[size=medium][b]效果图：[/b][/size] [img]http://dl2.iteye.com/upload/attachment/0120/4645/79cf2283-c75f-376e-8df1-a39b3090da9e.png[/img] [size=medium][b]HTML:[/b][/size] [code="html"] 4....
[css - hr ] border color 横线高度和颜色
iteye_3352的博客
04-28 977
如果设定 hr 的 border，会发现其高度会比不设置高2倍，即使高度设为最小值： 1px; [code="css"] hr{ border: 1px solid #bbe; } [/code] 这是什么原因？ 原来 hr 也是遵守盒子模型，具有四条边： [code="css"] border-top border-bottom border-right ...
51VOA-css
iteye_3352的博客
03-12 721
[size=large][b][url=http://www.51voa.com/]51voa - css[/url][/b][/size] [code="java"] $("#Content_VOA,#left_nav,#logo,#nav,#notice,#Bottom_VOA,#list").hide(); $("#right_box,#content").css({ "wid...
display:none与visibility:hidden的区别？
最新发布
11-21
在CSS中，`display:none` 和 `visibility:hidden` 都用于隐藏元素，但它们的行为有很大的不同。 `display:none` 会使元素完全从文档流中移除，该元素不会在页面上占据任何空间，就好像它根本不存在于HTML文档中一样。这意味着它不会影响其他元素的布局，并且该元素及其子元素的事件绑定也不会触发，在浏览器渲染时也不会绘制该元素。例如： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .hidden-display { display: none; } </style> </head> <body> <div class="hidden-display">这个元素使用display:none隐藏</div> <div>这是另一个元素</div> </body> </html> ``` 在上述代码中，使用 `display: none` 的元素不会在页面上显示，也不会占据空间，后面的元素会填充其原本的位置。 而 `visibility:hidden` 只是让元素不可见，但元素仍然会在文档流中占据它原本的空间，它的布局位置不会改变，就好像元素是透明的一样。元素及其子元素的事件绑定仍然存在，只是因为不可见而无法触发。例如： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .hidden-visibility { visibility: hidden; } </style> </head> <body> <div class="hidden-visibility">这个元素使用visibility:hidden隐藏</div> <div>这是另一个元素</div> </body> </html> ``` 在这个例子中，使用 `visibility: hidden` 的元素虽然不可见，但它原本的空间仍然被保留，后面的元素不会填充该位置 [^1][^2][^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值