css 中visibility:hidden和display:none有什么区别呢

最新推荐文章于 2025-04-25 08:00:00 发布
转载 最新推荐文章于 2025-04-25 08:00:00 发布 · 88 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/jq-melody/p/4745891.html

本文介绍了两种使用CSS来隐藏页面元素的方法。一种是使用visibility:hidden，该方法会让元素隐藏但仍然保留其占据的空间；另一种是使用display:none，这种方法则会使元素完全不占任何空间。对于希望在不改变页面布局的情况下隐藏元素的开发者来说，这些技巧非常实用。 
<div style="width:100px;height:100px;background:red;visibility:hidden"></div>
//对象隐藏后，还有占有相应的空间大小

<div style="width:100px;height:100px;background:red;display:none"></div>
//对象隐藏后，对象不占任何空间

转载于:https://www.cnblogs.com/jq-melody/p/4745891.html

display:none和visibility:hidden的差别比较与演示代码
01-19
前言： 在使用css隐藏栏位或物件的时候， 常常会使用到display:none和visibility:hidden这两个属性， 但却很容易分不清楚这两个的差别， 或是乾脆同时使用两种属性，来确保物件一定被隐藏， 其实我们可以很简单的来...
面试题16：重绘（reflow）和回流（repaint）,visibility: hidden 和 display: none的区别
qq_51066068的博客
04-23 4092
面试官：请说一下什么是重绘和回流和visibility: hidden 和 display: none的区别 回流与重绘 概念 当JS对页面的节点进行操作时，就会产生回流或重绘 回流/重排（reflow）： 因为节点的尺寸、布局、显示(display: none/block)改变这些属性改变的时候，渲染树中的一部分或者全部需要重新构建，这种重新构建的现象就是回流。一个页面至少有一次回流。 重绘（repaint）： 回流时，浏览器会看重新构建受影响部分的渲染树，只要渲染树一被改变或重新构建，就一定会.
style="visibility: hidden"和 style=“display:none”之间的区别
weixin_34234829的博客
09-19 342
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; &
visibility:hidden;与 display:none;
Melissa的博客
07-15 681
Visibility:hidden与display:none; 都具有隐藏元素的效果，两者的区别有： 1. 当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。     而display实际上是设置元素的浮动特征,设置none 后相当于隐藏而且不占位。 2.当visibility被设置为"hidden"的时候，就不能再接收响应到事件了。  
visibility: hidden；到底是干什么的？使用场景是什么？底层原理是什么？
长风破浪会有时的博客
11-01 2073
是一个非常有用的 CSS 属性，用于临时隐藏页面上的元素，同时保持页面的布局不变。通过合理使用，可以灵活地控制页面元素的显示状态，而不影响其他元素的位置和尺寸。与相比，在某些场景下提供了更多的灵活性和更好的用户体验。
visibility:hidden；与display:none；的区别和渐进增强与优雅降级的区别
wx112728的博客
03-16 1914
1.作用不同 visibility:hidden; 将元素隐藏，但是在网页中的位置不会被取缔。 display:none; 将元素的显示设为无，在网页中不占任何位置。 2.定义不同 visibility 属性指定一个元素是否可见的 display 这个属性用于定义建立布局时元素生成的显示框类型 visibility:hidden;会触发重绘（repaint） display:none;会触发回流（reflow） 重绘不一定回流，回流一...
display:none和visibility:hidden的区别
flower521528的博客
03-16 1万+
display：none 和visibility：hidden都可以实现让元素隐藏的效果，但原理是大不相同 1.display:none是让这个元素失去块元素的效果，其本身这个元素也是直接消失，会影响到布局问题。 2.visibility:hidden:可以让元素消失，属于css样式，它只是简单的让元素看不见，但本身的位置还在，如果对div进行hidden，那么div除了看不见，其他所有的样式都在。 ...
`visibility: hidden`和`display: none`区别
最新发布
m0_72030584的博客
04-25 754
`visibility: hidden`和`display: none`区别
css元素隐藏原理及display:none和visibility:hidden
09-22
在介绍了这么多隐藏元素的方法之后，我们要特别注意display:none和visibility:hidden两种属性的主要区别。这两者之间的差异主要表现在以下几个方面： 1. 空间占据：display:none;隐藏的元素不占据任何布局空间，而...
display:none和visibility:hidden两者的区别
weixin_43535265的博客
03-09 2294
一、相同点 display:none和visibility:hidden 都能把网页上的某元素隐藏起来 二、不同点 示例代码如下： <!DOCTYPE html> <html> <head> <style> .hidden1 { display:none; } .hidden11 { display: inherit; } .hidden12 { display: block; } .hi
visibility: hidden；与display:none；区别
qq_43812504的博客
12-02 7253
visibility:hidden;和display:none;的区别： visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域， display:none属性会使这个对象彻底消失不显示，也不再占用位置。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp
visibility=hidden, opacity=0，display:none
BigDaddy233333的博客
12-09 412
visibility=hidden, opacity=0，display:none opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的。 visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件。 display=none，把元素隐藏起来，并且会改变...
visibility:hidden和display:none的区别
热门推荐
SoLoJia的博客
03-15 2万+
visibility:hidden和display:none有以下几种不同，分别是1、作用不同；2、使用后HTML元素有所不同；3、定义不同。 1、作用不同: visibility:hidden将元素隐藏，但是在网页中该占的位置还是占着。 display:none将元素的显示设为无，即在网页中不占任何的位置。 2、使用后HTML元素有所不同: visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、
CSS中，display：none、visibility：hidden 和 opacity：0 之间的区别
LoveHaixin的博客
09-19 1504
display:none 隐藏之后不占位置，该元素和它所有的后代元素都会被隐藏，也无法使用屏幕阅读器等辅助设备访问；visibility:hidden 会被子元素继承，通过设置子元素visibility:visible来显示子元素。opacity:0 会被子元素继承，但是不能设置子元素opacity:0来重新显示。display:none 不会被子元素继承，父元素都不存在了，子元素也不会显示出。display:none 的元素都已经不再页面存在了，因此无法触发它绑定的事件。5、是否会产生生回流和重绘。
display:none和visibility:hidden区别
m0_47013706的博客
04-06 513
display:none和visibility：hidden区别
display:none 与 visibility:hidden 的区别
weixin_39307273的博客
02-14 1635
除了是否占据空间外，还有其他区别要注意 1、空间占据 display:none 隐藏后不占据额外空间，相当于删除元素 visibility:hidden占据着空间 opacity:0占据着空间 2、子元素继承 display:none 元素被删除，子元素也会被删除，自然也就不会显示 visibility:hidden 子元素具有继承性，可以通过设置子元素v...
CSS属性：元素隐藏
沉梦昂志
06-25 346
overflow 属性 处理超出范围的文本内容 常用属性值 visible 默认值，溢出内容不会被修剪，会呈现在元素框之外 hidden 不显示溢出的内容 scroll 滚动条来显示元素内溢出的内容，即使没有溢出也显示滚动条 auto 自动地处理溢出，如果溢出则显示滚动条，如果没溢出，则正常显示 代码示例 <style type="text/css"> div{ width: 100px; height: 100px; backgro
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别 、遮罩层效果、​ 三级菜单制作、选项卡制作——css3知识点总结
TKY666的博客
03-15 2781
一、css3新增选择器 1、兄弟选择器 相邻兄弟选择器 E + F { } 紧挨选择器E后的那个兄弟选择器F /* 相邻兄弟选择器，该代码意思是选择紧邻div后的那一个span元素，且只有第一个span会被选中。 */ div+span{ color: pink; } 通用兄弟选择器 E ~ F{ } 选择器E后的所有的兄弟选择器F /* 通用兄弟选择器，选择所有div元素后面的span元素 */ /* 一对.
揭示CSS隐藏元素奥秘：display:none与visibility:hidden差异
本文将详细介绍几种常见的元素隐藏技巧：`display:none`、`visibility:hidden`，以及它们与`position`属性的结合使用，同时还会探讨`opacity`和`filter`用于透明度控制的情况。 1. **display:none**: `display:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值