display:none和visiblity:hidden以及opacity:0的区别

最新推荐文章于 2023-09-19 17:27:04 发布
最新推荐文章于 2023-09-19 17:27:04 发布
阅读量574 收藏 1
点赞数
分类专栏： 面试 前端小知识 文章标签： display:none visibility:hidden opacity:0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhongqw_00/article/details/97554115
版权
display: none
  • 不占用空间
  • 设置transition属性无效
  • 改变属性值会引发页面产生重排
visibility: hidden
  • 元素会被隐藏，但是不会消失，依然占据空间。
  • 不会触发绑定的事件
  • 修改属性值会引起重绘
  • 设置treansition属性无效
opacity: 0
  • 只是透明度为100%，元素隐藏，所以依然占据空间
  • 可以使用transition属性
  • 也可以触发绑定的事件
前端碎碎念
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS隐藏元素 display visibility opacity的区别.docx
07-24
在CSS中，隐藏元素的方法主要有三种：`display:none`、`visibility:hidden`和`opacity:0`，它们各自有不同的特点和适用场景。 1. `display:none`：此属性会使元素完全从页面布局中消失，不占据任何空间。元素及其...
谈谈CSS隐藏元素(display,visibility)的区别
12-03
在CSS中，隐藏元素主要有两种方法：`display: none` 和 `visibility: hidden`，它们在隐藏元素的同时，对页面布局和交互性有着不同的影响。此外，还有一些其他的技术，如设置`height: 0`结合`overflow: hidden`或者...
display:none;visibility:hidden;和opacity:0;的区别
dengkuidian7983的博客
12-22 132
display:none; visibility:hidden; opacity:0; 它们都可以让元素隐藏掉，但是它们之间还是有区别的 display:none;隐藏后不占空间 而另外两个虽然隐藏了元素，但是还是占据着空间 而transition对于display:none;和visibility:hidden;是无效的 但是对于opacity:0;是有效的 转载...
display:none;opacity:0;visibilty:hidden;区别与联系
SevenLee的个人博客
01-08 269
共同点：他们都会让元素隐藏；区别： 结构 display:none会让元素完全从渲染树中消失，渲染时不再占据任何空间，不能点击；visibilty:hidden不会让元素从渲染树上消失，渲染元素继续占据空间，只是内容不可见，不能点击；opacity:0不会让元素在渲染树中消失，渲染元素继续占据空间，只是内容不可见，可以点击；继承 display:none和opacity:0：是非继承属性，子孙节...
display: none； visibility: hidden； opacity: 0； 三者的区别
blog
08-28 663
文章目录前言一、display: none二、visibility: hidden三、opactiy: 0四、测试代码总结 前言 display: none; visibility: hidden; opacity: 0; 均是 css 中控制元素在页面中隐藏的属性值，但是它们之间隐藏的方式效果及性能又有所不同，下面我们将一起来探讨探讨。 一、display: none DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间； 事件监听：无法进行 DOM 事件监
前端面试题：display:none;opacity:0;visibilty:hidden;区别与联系
weixin_45688725的博客
04-20 923
共同点：他们都会让元素隐藏； 区别： 结构 display:none会让元素完全从渲染树中消失，渲染时不再占据任何空间，不能点击； visibilty:hidden不会让元素从渲染树上消失，渲染元素继续占据空间，只是内容不可见，不能点击； opacity:0不会让元素在渲染树中消失，渲染元素继续占据空间，只是内容不可见，可以点击； 继承 display:none和opacity:0：是非继承...
三种隐藏方式：display:none,visibility:hidden,opacity:0的区别
m0_52943868的博客
04-01 3776
1、display:none隐藏 display:black 显示 2、visibility: hidden 隐藏 visibility: visible 显示 3、 opacity: 0 隐藏 opacity：1 显示 其三者的区别： 1、时间绑定 display 的元素已经不再页面 所及无法触发上面的绑定时间 visibility: hidden ：元素上绑定的时间也无法触发 opacity：透明度为0 其实际还在 所及可以触发上边的绑定时间 2、对于空间的占用 display:n..
jquery 设置style:display的方法
10-24
当处理`display`时，还需要注意其他可能影响元素可见性的CSS属性，如`opacity`（透明度）和`visibility`（可见性）。`display:none`会让元素完全不占用空间，而`visibility:hidden`则只是让元素不可见，但仍然保留...
Neon-Button:使用HTML和CSS创建霓虹灯按钮
03-10
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #00ffff, 0 0 70px #00ffff, 0 0 80px #00ffff; opacity: 0; transition: opacity 0.3s; } .neon-button:hover::after { opacity: 1; } @...
interview:面试
03-15
display:none和visibility:hidden的区别 1.visibility:hidden 将元素隐藏，空间不释放 使用后仅仅视觉上看不见 所占据空间仍然存在 2.display:none 将元素显示设为无 空间释放 各种属性丢失 opacity的兼容...
元素隐藏之display:none、visibility:hidden、opacity:0、overflow:hidden区别
DZQ1223的博客
03-23 1007
元素隐藏
简述display:none visibilty:hidden opacity：0 的区别
qq_57404393的博客
09-06 444
1.opacity：0 不会改变页面布局，如果该元素已经绑定 一些事件，如 click 事件，那么点击该区域，也能触发点击事件。2. visibility：hidden 不会改变页面布局，不会触发该元素已 经绑定的事件。3. display：none 会改变页面布局，可以理解成在页面中把该元素删除掉。相同点：都能使元素隐藏起来。
CSS中，display：none、visibility：hidden 和 opacity：0 之间的区别
最新发布
LoveHaixin的博客
09-19 656
display:none 隐藏之后不占位置，该元素和它所有的后代元素都会被隐藏，也无法使用屏幕阅读器等辅助设备访问；visibility:hidden 会被子元素继承，通过设置子元素visibility:visible来显示子元素。opacity:0 会被子元素继承，但是不能设置子元素opacity:0来重新显示。display:none 不会被子元素继承，父元素都不存在了，子元素也不会显示出。display:none 的元素都已经不再页面存在了，因此无法触发它绑定的事件。5、是否会产生生回流和重绘。
隐藏元素的方式：display:none、visibility:hidden、opacity:0，它们之间的区别
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-11 722
display: none 该元素以及它的所有后代元素都会隐藏，会使元素脱离文档流，不占据原来的空间，会引起页面的重排（隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失） visibility: hidden 可以隐藏这个元素，不会脱离文档流，隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是不会影响页面布局。 opacity:0 该元素隐藏起来了，不会脱离文档流，不会改变页面布局，并且，如果该元素已经绑定一...
比较 opacity: 0、visibility: hidden、display: none
DJCBPL的专栏
06-24 183
比较 opacity: 0、visibility: hidden、display: none 一、display: none; DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间； 事件监听：无法进行 DOM 事件监听； 性能：动态改变此属性时会引起重排，性能较差； 继承：不会被子元素继承，毕竟子类也不会被渲染； transition：transition 不支持 display。 二、visibility: hidden; DOM 结构：元素被隐藏，但是会被渲染不会消失，占
display:none、visibility:hidden 和 opacity:0的区别
一只白猫罢了
03-22 208
一、空间占据 display:none隐藏后不占据额外空间，它会产生回流和重绘，而visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。 二、子元素继承 display:none不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了，皮之不存，毛之安附~~ visibility:hidden 会被子元素继承，可以通过设置子元素v...
分析比较opacity: 0、visibility: hidden、display: none 优劣和适用场景
wang415229224ye的博客
03-24 689
1、DOM结构方面 display，会让元素完全从渲染树中消失，渲染的时候不占据任何空间，不能点击。 visibility，不会让元素从渲染树消失，元素继续占据空间，只是内容不可见，不能点击。 opacity，不会让元素从渲染树消失，元素继续占据空间，只是内容不可见，可以点击 2、继承方面 display，会让元素完全从渲染树中消失，渲染的时候不占据任何空间，不能点击。 visibility，不会让元素从渲染树消失，元素继续占据空间，只是内容不可见，不能点击。 opacity，不会让元素从渲染
关于opacity:0、visibility:hidden、display:none三个属性的比较以及拓展
问白的博客
03-04 8295
今天上午看某头条的时候有个刚入门的前端小伙伴提问道opacity:0、visibility:hidden、display:none。这三个属性的区别，这三个属性在我们日常开发中也算是用到频率也是蛮多的，所以干脆就就把这三个属性放在一起，配合实例做一个比较。首先这三个属性依次设置为0/hidden/none都可以使得用户看不见页面上的元素，不过他们之间还是有区别的，不然若是一样的话，也就没必要用三个...
display:none, visualbility:hidden 和 opacity:0隐藏元素的三种方式
过客如期的博客
08-07 308
一，display:none 1.dom依然渲染，看不见摸不着 2.将一个元素切换到display:none时，会引发回流和重绘，因为页面会重新布局。 二，visualbility:hidden 1.占据原来的空间，看不见摸得着 2.定义在元素上面的事件如点击事件依然会执行，只会触发重绘 三，opcity:0 1，同visualbility:hidden 看不见摸得着 2.就是将透明度设为100%， 四，注意 1.这三种方法都没有销毁DOM ...
display:none和visibile:hidden opacity0重绘重排
05-17
`display:none`和`visibility:hidden`以及`opacity:0`在页面中都可以隐藏元素，但它们的实现方式不同，会对页面的重绘重排产生不同的影响。 `display:none`会将元素从文档流中完全删除，这会导致元素不再占据任何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值