opacity:0, visibility:hidden, display:none的对比区别

最新推荐文章于 2023-12-29 23:00:00 发布

原创最新推荐文章于 2023-12-29 23:00:00 发布 · 447 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

本文介绍了三种使用CSS隐藏或显示网页元素的方法：通过调整opacity值使元素完全透明但保持位置不变，利用visibility属性使元素不可见但仍占位，以及采用display属性彻底移除元素使其不占空间且无法触发事件。

1、opacity:0

opacity是透明度的意思，0是直接透明，1是显示。

透明时还会占用着页面元素的位置
设置的事件可触发

2、visibility:hidden

这个属性是设置元素是否可见

占用着页面元素的位置
不能触发其中绑定的事件

3、display:none

这是控制展示方式的

不会占用页面的位置，如果有其他元素的话，可以补上
无法触事件

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Together780

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

liuhao9999的博客

03-22

585

结构：display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击继承：display: none：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，

`visibility: hidden`和`display: none`区别

m0_72030584的博客

04-25

768

`visibility: hidden`和`display: none`区别

参与评论您还未登录，请先登录后发表或查看评论

比较opacity:0、visibility:hidden、display:none，优劣和适用场景

Menqq的博客

03-16

1367

display: none DOM 结构：浏览器不会渲染 display 属性为 none 的元素，会让元素完全从渲染树中消失，渲染的时候不占据任何空间；事件监听：无法进行 DOM 事件监听，不能点击；性能：修改元素会造成文档回流（reflow 与 repaint）,读屏器不会读取display: none元素内容，性能消耗较大；继承：是非继承属性，由于元素从渲染树消失，造成子孙节点消失，即使修改子孙节点属性子孙节点也无法显示，毕竟子类也不会被渲染；场景：显示出原来这里不存在的结构； tran..

opacity:0；Display:none 、visibility:hidden的区别

Ahua_Core的博客

08-14

1313

Display:none详解display:none的用处display:none的实例visibility:hidden也可以隐藏元素display：none的注意事项 display:none的用处 display:none 一般用于JavaScript动态隐藏元素，值得注意的是：被隐藏的元素不占据原本的位置空间 display:none的实例设置三个行内块盒子，添加相关属性，代码如下： <div class="box1">I am Box 1</div> &l

opacity: 0、visibility: hidden、display: none三者区别

guoqkmiss的博客

05-12

1061

opacity: 0、visibility: hidden、display: none三者区别 opacity: 0、visibility: hidden、display: none三者都是让对应的元素不可见，区别可以从结构、继承、性能三点上面来讲结构： display:none: 会让元素完全从dom中消失，渲染的时候不占据任何空间, 不能点击 visibility: hidden:不会让元素从dom中消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从dom中消

CSS中，display：none、visibility：hidden 和 opacity：0 之间的区别

LoveHaixin的博客

09-19

1521

display:none 隐藏之后不占位置，该元素和它所有的后代元素都会被隐藏，也无法使用屏幕阅读器等辅助设备访问；visibility:hidden 会被子元素继承，通过设置子元素visibility:visible来显示子元素。opacity:0 会被子元素继承，但是不能设置子元素opacity:0来重新显示。display:none 不会被子元素继承，父元素都不存在了，子元素也不会显示出。display:none 的元素都已经不再页面存在了，因此无法触发它绑定的事件。5、是否会产生生回流和重绘。

【css】display：none、visibility：hidden 和 opacity：0 之间的区别

t13965688123的博客

05-11

1425

1、display:none隐藏， display:black 显示； 2、visibility: hidden 隐藏， visibility: visible 显示； 3、 opacity: 0 隐藏， opacity：1 显示；不同点： 1，是否占据空间 display:none 隐藏之后不占位置，该元素和它所有的后代元素都会被隐藏，也无法使用屏幕阅读器等辅助设备访问； visibility: hidden 隐藏元素占用与未隐藏时一样的空间，会影响页面布局； opacity: 0 是让元素产生透明度，

opacity: 0、visibility: hidden、display: none 有啥区别

zhoukaibai的博客

05-18

1758

这三种方式的使用场景分别是：● opacity: 0：隐藏元素，但是需要占据原来的空间；需要注意的是，opacity 属性不仅影响元素的可见性，还影响其交互行为（例如点击事件的响应）● visibility: hidden：隐藏元素，但是需要占据原来的空间，并且保持元素布局不变；● display: none：隐藏元素，并且不需要占据原来的空间，也不影响其他元素的布局。

display: none、visibility: hidden 和 opacity: 0 的区别？

最新发布

07-30

在CSS中，`display: none`、`visibility: hidden` 和 `opacity: 0` 是三种常见的隐藏元素的方式，它们在实现效果和行为上存在显著差异，主要体现在以下几个方面： ### 1. 是否占据空间 - `display: none`：元素...

css元素隐藏原理及display:none和visibility:hidden

09-22

在介绍了这么多隐藏元素的方法之后，我们要特别注意display:none和visibility:hidden两种属性的主要区别。这两者之间的差异主要表现在以下几个方面： 1. 空间占据：display:none;隐藏的元素不占据任何布局空间，而...

visibility: hidden ，opacity display:none

06-01

这三个CSS属性都可以用于隐藏元素，但有一些区别： ...如果需要隐藏元素但仍占用布局空间，则使用`visibility: hidden`或`opacity: 0`；如果需要完全移除元素并释放布局空间，则使用`display: none`。

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

Silence_555的博客

06-29

408

如何隐藏一个元素不显示

display:none和visibility:hidden和opacity:0的区别

qq_40664253的博客

07-25

1691

css让元素不可见的方法有很多种，裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。区别： display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素； visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；使用vi...

css属性opacity: 0；display: none；visibility: hidden的区别；隐藏页面中的某个元素的方法有哪些？rgba()和opacity的透明效果有什么不同?

星辰迷上大海的博客

12-29

1117

opacity: 0;、visibility: hidden;、display: none; 三者都是让对应的元素不可见。

opacity: 0、 visibility: hidden、display: none 对比记录

野生松

11-17

209

简单记录： display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击。更改时会触发回流，性能消耗大不可继承，影响子元素 visibility: hidden: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击更改时会触发重绘，性能消耗小可继承，不影响子元素 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击更改时会触发重绘，性能消耗小不可继承，影响子元素 ...

opacity: 0、visibility: hidden、display: none 优劣和适用场景

qazxbjp2010的博客

03-18

395

素display:none DOM 结构：元素完全从渲染树中消失，不占据空间；子节点：不会被子节点继承，子节点设置display:block也无法显示；性能：改变此属性时会引起重排和回流，性能较差；但由于修改被隐藏的子节点时不会进行重排，所以在大量修改子节点样式时，先隐藏修改完在显示会有较好的性能； Event事件：无法进行 DOM 事件监听、无法被选中； transition：tra...

opacity:0跟display:none

weixin_30707875的博客

07-01

186

opacity：0；隐藏文本内容，但是位置还在，点击还有效果出现； display：none；隐藏文本内容，点击无效果。 opacity兼容性： filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* 老版Mozilla */ -khtml-opacity:0.5; ...

元素隐藏之display:none、visibility:hidden、opacity:0、overflow:hidden区别

酱爆 Crazy

09-27

690

● visibility: hidden，会被子元素继承，子元素可以通过设置visibility: visibile来取消隐藏。这种方式会使得超出的元素隐藏，对行内元素无效，必须是块级元素，隐藏之后元素依然占据着位置。● opacity: 0，会被子元素继承，并且子元素无法通过opacity:1来取消隐藏。● visibility: hidden，元素被隐藏，但是会被渲染，依然占据空间；● opacity: 0，本质是设置透明度为0，元素隐藏，依然占据空间。方式二. visibility:hidden。

display:none；与visibility:hidden；opacity:0；

weixin_52901235的博客

02-02

171

display=none，把元素隐藏起来，并且会改变页面布局，opacity=0，该元素隐藏起来了，但不会改变页面布局，visibility=hidden，该元素隐藏起来了，并且，如果该元素已经绑定一些事件，如click事件，但不会改变页面布局，但是不会触发该元素已经绑定的事件。可以理解成在页面中把该元素删除掉一样。那么点击该区域，也能触发点击事件的。