display:none和visibility:hidden的区别

最新推荐文章于 2024-04-06 23:07:09 发布
原创 最新推荐文章于 2024-04-06 23:07:09 发布 · 769 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#display:none和visibility:hidden

本文详细对比了CSS中display:none与visibility:hidden的区别。display:none使元素彻底消失且不占位，而visibility:hidden仅使元素视觉上消失但仍占位。此外，文章还介绍了两者在性能上的差异：visibility:hidden切换时不会引起页面回流，因此相比display:none有更好的性能。

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流

display:none和visibility:hidden两者的区别
weixin_43535265的博客
03-09 2302
一、相同点 display:none和visibility:hidden 都能把网页上的某元素隐藏起来 二、不同点 示例代码如下： <!DOCTYPE html> <html> <head> <style> .hidden1 { display:none; } .hidden11 { display: inherit; } .hidden12 { display: block; } .hi
css元素隐藏原理及display:none和visibility:hidden
09-22
在介绍了这么多隐藏元素的方法之后，我们要特别注意display:none和visibility:hidden两种属性的主要区别。这两者之间的差异主要表现在以下几个方面： 1. 空间占据：display:none;隐藏的元素不占据任何布局空间，而...
display:none和visibility:hidden的差别比较与演示代码
01-19
前言： 在使用css隐藏栏位或物件的时候， 常常会使用到display:none和visibility:hidden这两个属性， 但却很容易分不清楚这两个的差别， 或是乾脆同时使用两种属性，来确保物件一定被隐藏， 其实我们可以很简单的来区分两者的差别。 AD： 你知道CSS display:none和visibility:hidden的区别吗，这里和大家分享一下，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
前端面试题（2017-12-4）
Vivianluolita的专栏
11-30 784
http://www.100mian.com/mianshi/webqianduan/49981.htmldisplay:none和visibility:hidden的区别？ 1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；2.使用visibility
display: none和visibility: hidden的区别解释
qq_37734787的博客
11-02 1091
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性 1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质
display:none和visibility:hidden区别
最新发布
m0_47013706的博客
04-06 532
display:none和visibility：hidden区别
display:none和visibility:hidden区别？
weixin_48037671的博客
03-19 468
display:none和visibility:hidden区别 1.占位 2.重绘和渲染
来讲讲display:none 与 visibility:hidden 的区别是什么？
夏天的博客
10-22 357
visibility 属性规定元素是否可见。 提示：即使不可见的元素也会占据页面上的空间。请使用 “display” 属性来创建不占据页面空间的不可见元素。 说明 这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见。值 collapse 在表中用于从表布局中删除列或行。 ...
display:none与visibility:hidden的区别是什么？
George_boy的博客
03-30 448
display : 隐藏对应的元素但不挤占该元素原来的空间。 visibility: 隐藏对应的元素并且挤占该元素原来的空间。 即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。 ...
display：none与visibility：hidden的区别是什么？
LuckXinXin的博客
02-27 382
display：隐藏对应的元素但不挤占该元素原来的空间。 visibility：隐藏对应的元素并且挤占该元素原来的空间。 即，使用CSS的display：none属性后，HTML元素（对象）的宽度，高度等各种属性值都将“丢失”；而使用visibility：hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而他所占据的空间位置仍然存在。 ...
display：none；与visibility：hidden的区别是什么？
zyzyzouyou的博客
10-10 789
1、display:none它不占据空间，对后面的元素布局没有任何影响，visibility:hidden会占据原本的空间，会影响后面元素的布局。 这是不加任何样式的三个盒子的排列 这是加了display:none的样式,第一个盒子已经完全消失了 这是加了visibility：hidden的样式,虽然盒子不见了,但是那个位置依然被占据. 2、如果给父元素设置display:none，给它的子元素设置display:block，也不能显示出来，如果给父元素设置visibili...
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、付费专栏及课程。

余额充值