display: none;_display:none、visibility:hidden和opacity:0之间的区别

最新推荐文章于 2024-06-05 00:48:32 发布
最新推荐文章于 2024-06-05 00:48:32 发布
阅读量73 收藏
点赞数
文章标签： display: none; 
 Title

none

opacity

如果对大家有帮助请点点赞，谢谢

一、空间占据

display:none不会占据原来的空间

visibility:hidden会占据原来的空间

opacity:0会占据原来的空间

二、继承

display:none会被子元素继承，如果父元素消失了子元素也消失

visibility:hidden会被子元素继承

opacity:0会被子元素继承

三、事件

display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件

visibility:hidden 元素上绑定的事件也无法触发

opacity: 0元素上面绑定的事件是可以触发的

b636e80646e2205c9fff6260e7dc5111.png
cb5bc76205d05dda9ce4384abab63bab.png
1c0ec59fdaf2070808c6109483f1722a.png

四、过渡动画

display:none 无法触发transition

visibility:hidden 无法触发 transition

opacity: 0 能触发transition

我们把注释打开，然后在浏览器F12即可查看

7574afdee463191733c8ff6cd136d00d.png

取消勾选看看有过度效果没

显然只有opacity能触发过渡效果

050ec75f96b4b8898f9375bfd036cefb.png

正在渐渐显示出来

如果对大家有帮助请点点赞，谢谢

weixin_39774682
关注
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
liuhao9999的博客
03-22 357
结构：display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击 继承：display: none：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，
display:none、visibility:hidden与opacity:0直间到底什么区别（笔试题）
m0_60622481的博客
04-18 283
1、空间占据方面 display:none隐藏后不会占据原有空间，会产生回流和重绘 visibility:hidden和opacity:0元素隐藏，但仍然占据着原有空间，它们俩只会引起页面重绘。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g.
display:none和visibility:none的区别
程序员小周的博客
07-31 6830
联系：它们都能让元素不可见区别：display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间； visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见 display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示； visibility: hidden;是继承属性，子孙节点消失由于继
display:none
热门推荐
进击的Coder菜鸟
08-21 11万+
1、display:none和visible:hidden都能把网页上某个元素隐藏起来。 2、但两者有区别: ●display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 ●visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。 1、visibility: hid...
两种隐藏元素方式【display: none】和【visibility: hidden】的区别
weixin_30505225的博客
08-26 280
此随笔的灵感来源于上周的一个面试，在谈到隐藏元素的时候，面试官突然问我【display: none】和【visibility: hidden】的区别，我当时一愣，这俩有区别吗，好像有，但是忘记了啊，因为平常基本都是用【display: none】，几乎没用过【visibility: hidden】，我只好如实回答。面试结束后回到家的第一件事就是敲代码测试，下面就是测试过程及结果： 一、...
display:none;和 visibility: hidden;知多少
骆天一
10-20 513
关于如何解决块级元素消失底下的元素自动上移的问题
CSS隐藏属性display:none；visibility:hidden；overflow:hidden
Jorpeng的博客
10-28 4328
前端CSS元素隐藏的知识（display:none；visibility:hidden；overflow:hidden；opacity: 0）
css元素隐藏原理及display:none和visibility:hidden
09-22
在介绍了这么多隐藏元素的方法之后，我们要特别注意display:none和visibility:hidden两种属性的主要区别。这两者之间的差异主要表现在以下几个方面： 1. 空间占据：display:none;隐藏的元素不占据任何布局空间，而...
visibility=hidden, opacity=0，display:none的区别
Liu331013的博客
03-31 704
visibility=hidden MDN官方解释：CSS属性 visibility 显示或隐藏元素而不更改文档的布局。该属性还可以隐藏 table中的行或列。 visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件 opacity=0 opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的 <style> .box { width:
RGBA和OPACITY的透明效果有何不同 DISPLAY:NONE和VISIBILITY：HIDDEN的区别
IT修真院：初学者转行到互联网的聚集地
05-31 450
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【 RGBA和OPACITY的透明效果有何不同 DISPLAY:NONE和VISIBILITY：HIDDEN的区别】 大家好，我是IT修真院北京分院第23期的学员郭婷婷，一枚正直纯洁善良的WEB前端程序员...
css display:none使用
yymh123的专栏
10-15 1426
1.如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值 2.有些情况下可以使用style.visibility来代替style.displ
display:none隐藏元素的差异
DZY_hungry的博客
02-14 121
隐藏方式 1.一般隐藏元素的方法有两种css : (1) display : none; 隐藏元素且没有物理空间。 (2) visible : hidden; 隐藏元素且有物理空间。
display: none；和visiblilty:hidden；的区别
fagdg的博客
03-16 1456
一、相同点： 两者都可以隐藏元素 二、不同点： 1、是否占据空间： display: none;隐藏时不占原先的页面空间，不影响页面布局 visiblilty:hidden;隐藏时占据原先的页面空间，影响页面布局 2、是否具有继承性： display: none;不具有继承属性，元素display:none及其子元素都将隐藏不可见 ...
display:none与visiblity:hidden的应用
学习中
04-02 3899
display:none时，该对象不占用空间，也不可见 visibility:hidden时，该对象占据空间，仅不可见 JQuery中，.hiden()，.show()方法对应的时display的操作 要隐藏父元素的同时显示子元素该用visibility： 父元素：visibility:hidden 子元素：visibility:visible ...
displaynone符合html5标准,javascript – JS HTML5验证“display：none”必需的输入元素
weixin_32236671的博客
06-10 335
我在Chrome或Firefox中没有遇到同样的错误.但是我确实认为你需要在单击“next”时进行验证才能使其正常工作：HTMLJSfunction Next() {var blnNext = true;var form = document.getElementById('form1');var div = document.getElementById('div1');var inputs =...
关于display：none的恢复问题 或取消display：none属性
liangshiyun1的博客
07-23 1万+
关于display：none的恢复问题 或取消display：none属性；通过display属性来设置元素的不显示及其恢复。
display: none；和 visibility：hidden；有什么区别
6块腹肌的博客
08-03 503
一、它们的相同点： 都可以隐藏一个元素。 二、不同点： display：none；不会占用文档流位置； visibility：hidden；占用文档流位置； 三、性能： 从性能上来说，display：none；会更加消耗性能，因为当你从none和其它状态来回切换的时候，实际上是需要引擎去解析，然后还会影响到文档流的排列，这样会导致页面回流。 而visibility则不存在...
【前端】display:none和visibility:hidden两者的区别
最新发布
06-05 7754
【前端】display:none和visibility:hidden两者的区别
CSS中，display：none、visibility：hidden 和 opacity：0 之间的区别
LoveHaixin的博客
09-19 743
display:none 隐藏之后不占位置，该元素和它所有的后代元素都会被隐藏，也无法使用屏幕阅读器等辅助设备访问；visibility:hidden 会被子元素继承，通过设置子元素visibility:visible来显示子元素。opacity:0 会被子元素继承，但是不能设置子元素opacity:0来重新显示。display:none 不会被子元素继承，父元素都不存在了，子元素也不会显示出。display:none 的元素都已经不再页面存在了，因此无法触发它绑定的事件。5、是否会产生生回流和重绘。
visibility: hidden ，opacity display:none
06-01
这三个CSS属性都可以用于隐藏元素，但有一些区别： ...如果需要隐藏元素但仍占用布局空间，则使用`visibility: hidden`或`opacity: 0`；如果需要完全移除元素并释放布局空间，则使用`display: none`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值