Html style="visibility:hidden"与style="display:none"的区别

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

#html

本文介绍了两种CSS属性：visibility:hidden与display:none的区别。visibility:hidden使元素不可见但仍保留其占用的空间；而display:none则完全移除元素，不保留任何空间。通过实例展示了这两种属性的实际效果。

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

style="visibility:hidden": 使对象在网页上隐藏,但该对象在网页上所占的空间没有改变.
style="display:none": 使对象在网页上彻底消失,不为被隐藏的对象保留物理空间.

例子:
<html>
  <head>
  <title>style="visibility:hidden"与style="display:none"的区别</title>
  </head>
 
  <body>
    <span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span>
    <span style="display:none; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span><br/>
  </body>
</html>

display:none和visibility:hidden两者的区别
weixin_43535265的博客
03-09 2257
一、相同点 display:none和visibility:hidden 都能把网页上的某元素隐藏起来 二、不同点 示例代码如下： <!DOCTYPE html> <html> <head> <style> .hidden1 { display:none; } .hidden11 { display: inherit; } .hidden12 { display: block; } .hi
`visibility: hidden`和`display: none`区别
m0_72030584的博客
04-25 695
`visibility: hidden`和`display: none`区别
关于style="visibility: hidden;"和style="display:none"
星雨小驿
11-29 7862
在页面表格处理时，难免会用到隐藏列，style="visibility: hidden;"和style="display:none"都可以，但是有区别的，前一种方法是直接隐藏，但占用的页面空间是不变的。后一种方法直接是不显示，因此不占用的页面空间。区别的时候可以从字面意思。看明白字面意思就不难理解。      sssss                  aaa    cccc
style="visibility: hidden"和 style=“display:none”之间的区别
weixin_34234829的博客
09-19 330
style=“display:none” 隐藏页面元素:   &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; function removeElement() { document.getElementById("p1").style.display="none"; } &lt;/script&gt; &
display:none和visibility:hidden的区别
最新发布
weixin_45799605的博客
05-25 111
display:none和visibility:hidden的区别
style="visibility: hidden"和 style=“display:none”区别
csdndenglu的专栏
05-22 1820
大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。 visibility属性用来确定元素是显示还是隐藏的，这用visibility="visible|hidden"来表示（visible表示显示，hidden表示隐藏）。 当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。例： ...
visibility和display的区别
我想我是海 冬天的大海 心情随风轻摆
05-20 1340
大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。<br /><br /> visibility属性用来确定元素是显示还是隐藏的，这用visibility="visible|hidden"来表示（visible表示显示，hidden表示隐藏）。<br /><br /> 当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。例：<br /><br /><br /> <script langu
display:none和visibility:hidden的差别比较与演示代码
01-19
前言： 在使用css隐藏栏位或物件的时候， 常常会使用到display:none和visibility:hidden这两个属性， 但却很容易分不清楚这两个的差别， 或是乾脆同时使用两种属性，来确保物件一定被隐藏， 其实我们可以很简单的来...
style-visibility
sinat_26845493的博客
08-07 269
style="visibility:hidden": 使对象在网页上隐藏,但该对象在网页上所占的空间没有改变. style="display:none": 使对象在网页上彻底消失,不为被隐藏的对象保留物理空间. 例子:     style="visibility:hidden"与style="display:none"的区别         隐藏区域显示区域
display属性值:
wenwen_2008的专栏
10-24 3263
display属性值: none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。 compact
2016.8.19 将div设置为隐藏使用style=“display:none”
weixin_30603633的博客
08-19 875
style="display:none"表示隐藏。 style="display:block"表示显示。 在代码中则使用$("#id").show(); 代码： 效果如图所示： 注意：display属性与visibiity属性的区别！ visibility属性： 确定元素显示还是隐藏； visibility="visible|...
style中display:none与visible:hidder的区别 以及disabled与readonly的区别
dengchezhong6725的博客
11-27 932
//style中display:none与visible:hidder的区别：display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。一下内容为引用1-4： 1、如果在样式文件或页面文件代码中直接用dis...
巧用style的display隐藏对象
程序才是王道...
03-16 3038
发现CSS一句话很经典：style="display: none"，加在哪就能就隐藏哪，做了一个隐藏的上传文件框，点击本机上传或checkbox后出现，再点击又将其隐藏。实现代码如下： function fjian(){if(document.getElementById(fj).style.display=="none") { fj.style.display="" document
css元素的显示与隐藏 display显示隐藏 +visibility显示隐藏 +overflow溢出显示隐藏
Echo_bx的博客
04-02 1102
css元素的显示与隐藏display显示隐藏元素visibility显示隐藏元素overflow溢出显示隐藏 display显示隐藏元素 display 设置或检索对象是否及如何显示。 display: none 隐藏对象 display：block 除了转换为块级元素之外，同时还有显示元素的意思。 特点： display 隐藏元素后，不再占有原来的位置。 visibility显示隐藏元素 visibility 属性用于指定一个元素应可见还是隐藏。 visibility：visible ; 　元素可视
关于HTML的隐藏方式，干货满满
xxx060214的博客
03-10 1920
opacity: 0 | ✔️ | ✔️ | 无 | ✔️ || visibility: hidden | ✔️ | ❌ | 无 | ✔️ || display: none | ❌ | ❌ | 可能 | ❌ |- **彻底移除元素** → 用`display: none`- **语义化隐藏** → 用`hidden`属性。
display: none与visibility: hidden有何异同？
04-09
<think>好的，我现在要回答用户关于CSS中display: none和visibility: hidden的区别和联系的问题。首先，我需要回忆之前学过的相关知识，并结合提供的引用资料来整理答案。 根据引用[1]、[2]、[3]中的内容，两者的主要区别在于是否占据空间、是否影响布局以及是否触发重排或重绘。比如，display:none会让元素完全从渲染树中消失，不占据任何空间，而visibility:hidden只是隐藏内容，但保留元素的空间。这点我记得没错，不过需要确认是否正确。 接着，我需要考虑它们的相似之处。比如两者都能隐藏元素，但隐藏的方式不同。用户可能还想知道它们对子元素的影响，比如如果父元素用了visibility:hidden，子元素是否可以覆盖这个设置？根据引用[3]，visibility具有继承性，子元素可以通过设置visibility: visible来显示，而display:none则不行，因为整个元素都不渲染了。 然后，关于性能方面，引用[4]提到浏览器的渲染机制，display:none会引起重排，而visibility:hidden只会引起重绘。重排的开销更大，所以频繁切换时可能需要考虑使用visibility:hidden来优化性能。 接下来需要组织答案的结构，先讲区别，再讲联系。区别可以从空间占据、重排重绘、事件响应、继承性等方面展开。联系方面则是它们都能隐藏元素，但实现方式不同。 还要注意用户的问题可能涉及应用场景，比如何时使用display:none更合适，比如在需要彻底移除元素时；而visibility:hidden适合保留布局的情况，比如做动画效果时暂时隐藏元素但保持位置。 最后，生成相关问题时要围绕这两个属性的使用场景、优化方法、对子元素的影响等方面提问，确保问题有针对性且能帮助用户深入理解。</think>### CSS中`display: none`与`visibility: hidden`的差异和联系 #### 一、核心区别 1. **是否占据空间** - `display: none`：元素完全从渲染树中移除，**不占据任何空间**，后续元素会“补位”[^3][^2]。 - `visibility: hidden`：元素内容不可见，但仍**保留原有空间**，布局结构不受影响[^1][^3]。 2. **重排（Reflow）与重绘（Repaint）** - `display: none`：触发**重排**（布局重新计算），可能影响页面性能[^4]。 - `visibility: hidden`：仅触发**重绘**（视觉样式更新），性能开销更小[^4]。 3. **事件响应与子元素继承性** - `display: none`：元素及其子元素**无法响应任何事件**（如点击、悬停）[^3]。 - `visibility: hidden`：元素自身事件失效，但子元素可通过`visibility: visible`重新显示并响应事件[^3]。 4. **属性保留** - `display: none`：元素的尺寸（宽高）、边距等属性被“丢弃”[^3]。 - `visibility: hidden`：元素的所有属性（如宽高、位置）仍保留[^3]。 #### 二、相似之处 1. **视觉隐藏**：两者均能实现元素的不可见性。 2. **代码简洁性**：均可通过单一属性控制隐藏，无需复杂逻辑。 #### 三、应用场景建议 - **使用`display: none`的场景**： - 需要彻底移除元素以优化DOM结构时（如动态切换选项卡内容）。 - 需要避免隐藏元素占用空间时（如响应式布局中隐藏冗余模块）。 - **使用`visibility: hidden`的场景**： - 需要保留元素占位以保持布局稳定时（如加载动画占位）。 - 需要性能优化时（频繁切换隐藏/显示状态，如轮播图预加载）。 --- 相关问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值