display：none 和 visibility：hidden 的区别

最新推荐文章于 2024-05-27 21:50:54 发布
最新推荐文章于 2024-05-27 21:50:54 发布
阅读量450 收藏
点赞数
分类专栏： 前端面试题总汇(HTML+CSS+JS) 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39639537/article/details/126627903
版权

dispaly:none 设置该属性后，该元素下的元素都会隐藏，占据的空间消失。visibility:hidden 设置该属性后，元素虽然不可见，但是依然占据空间的位置。

区别：
1.visibility具有继承性，其子元素也会继承此属性，若设置visibility:visible，则子元素会显示，
2.visibility不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行着。
3.在css3的transition中支持visibility属性，但是不支持display，因为transition可以延迟执行，因此配合visibility使用纯css实现hover延时显示效果可以提高用户体验
4. display:none会引起回流(重排)和重绘 visibility:hidden会引起重绘

ternence_li
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
display:none和visibility:hidden的差别比较与演示代码
09-25
display:none和visibility:hidden的差别:visibility:hidden隐藏，但在浏览时保留位置；而CSS display:none视为不存在，且不加载,感兴趣的朋友可以研究下
CSS面试相关问题
rainbow的博客
11-16 774
CSS的盒子 理解：元素被一个一个盒子包围着； 盒子分为： 块级盒子 block box 内联盒子 inline box 控制盒子属于显示哪种类型： 控制盒子外部显示类型：display: block display: inline-block 控制盒子内部显示类型：display: flex JS获取盒子宽高 clientHeight ： 盒子可视区域的宽高；heigh+padding offsetHeight: 加上了盒子边框 （一般使用offsetHight/offsetWid
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元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、
2021-05-25
yyhjiulaikankan的博客
05-25 1890
HTML面试题总结2 1.属于HTML5标签语意化的元素有 (AD) A.article、footer B.block C.section、banner D.header、nav 解释：html5手册语义化标签：article、section、aside、hgroup、header、 footer、nav、time、mark、figure、figcaption、contextmenu+menu 2.下面有关html结构正确的有（ ABC ） A.<ul><li></li&g
display和visibility与重排和重绘
qq_45228255的博客
05-26 1358
display:none和visibility:hidden都能把网页上某个元素隐藏起来，但是两者有区别： 1、display:none 1、不为被隐藏的对象保留其物理空间。html对象在页面上彻底消失（display:none会让元素完全从渲染树中消失，渲染的时候不占据任何空间）。 2、是非继承属性，子孙节点消失由于元素从渲染树消失造成的，通过修改子孙节点，属性无法显示。 3、修改常规文档流元素的display通常会造成文档的重排（reflow）重绘（repaint）。 2、visibility
jQuery可见性过滤器：hidden和：visibility用法实例
10-24
主要介绍了jQuery可见性过滤器：hidden和：visibility用法,实例分析了：hidden和：visibility的功能及相关使用技巧,需要的朋友可以参考下
display:none;与visibility:hidden;的区别
米刀文
07-20 1万+
如果想让某一段代码在前台不显示，最简单的方法是用css的display:none即可，这样下边的内容就自动上移或右侧的左移来填补这个空隙。但特殊情况下我们只需要隐藏这个元素， 但它的位置不能被占了，那该怎么实现呢？接下来我们来看css的另外一个属性Visibility属性。 visibility:隐藏对应的元素但不挤占该元素原来的空间。 display:隐藏对应的元素并且挤占该元素原来的空间
display:none和visibility:hidden的区别
weixin_33851604的博客
05-23 199
在使用CSS隐藏一些元素时，我们经常用到 display:none 和 visibility:hidden。两者差别如下： 1. 是否占据空间 display:none，该元素不占据任何空间，在文档渲染时，该元素如同不存在（但依然存在文档对象模型树中）。 visibility:hidden，该元素空间依旧存在。 即一个（display:none）不会在渲染树中出现，一个（visibility :h...
display:none和visibility:hidden两者的区别
热门推荐
越努力，越幸运！
06-24 12万+
使用css让元素不可见的方法有很多种，裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。很多公司的面试官也常常会问面试者这两者之间的区别。 display与元素的隐藏 如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方...
前端面试题（2017-12-4）
Vivianluolita的专栏
11-30 690
http://www.100mian.com/mianshi/webqianduan/49981.htmldisplay:none和visibility:hidden的区别？ 1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；2.使用visibility
css元素隐藏原理及display:none和visibility:hidden
09-22
在CSS中，让元素隐藏指屏幕范围内肉眼不可见的方法很多，只不过有的依然保留空间，而有的却消失的不留痕迹,接下来本文将详细介绍下css元素隐藏原理，感兴趣的你可不要错过了哈
visiblity:hidden和display:none的差异
01-25
visiblity:hidden和display:none属性之间的差异
display和visibility的区别示例介绍
11-30
display通常可以设置为none、inline、block visibility通常可以设置为hidden、visible 当display为none，visibility为hidden时，元素都会不见。不过其还有不同之处。 display会将元素隐藏掉，并且位置不再被占据，而...
display:none和visibility:hidden区别？
weixin_48037671的博客
03-19 339
display:none和visibility:hidden区别 1.占位 2.重绘和渲染
display-none和visibility-hidden区别
05-17 329
display:none与visibility:hidden的区别你知道吗？
lizengyuan的博客
06-18 199
display:one,隐藏对应的元素并且不占用原来的空间； visibility:hidden，隐藏对应的元素，并且占用原来的空间； 使用css display:none属性后，HTML元素的宽度和高度等各种属性值都将消失；但是使用visibility:hidden属性后，HTML仅仅是视觉上看不见，而它所占用空间仍然存在。 ...
display: none与visibility: hidden的区别
qq_43940172的博客
04-11 624
1. visibility具有继承性，给⽗元素设置visibility:hidden;⼦元素也会继承这个属 性。但是如果重新给⼦元素设置visibility: visible,则⼦元素⼜会显示出来。这个 和display: none有着质的区别 2. visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让⼀ 个元素不⻅了，但是其计数器仍在运⾏。这和display: none完全不⼀样 3.display;none表示直接消失 代码演示 c
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
最新发布
Jerry学长
05-27 1091
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
display:none 和 visibility:hidden
07-17
display:none和visibility:hidden的区别在于： display:none会将元素完全隐藏，不占据任何空间，即使在HTML代码中也不会显示出来；而visibility:hidden则是将元素隐藏，但仍然占据空间，即在HTML代码中仍然存在，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值