display: none;、visibility: hidden、opacity=0区别总结

2024-06-03 21:00:53

display: none;

1、浏览器不会生成属性为display: none;的元素。
2、display: none;不占据空间（毕竟都不熏染啦），所以动态改变此属性时会引起重排。
3、display: none;不会被子类继承，但是···子类是不会显示的，毕竟都一起被kill啦。
4、display,是个尴尬的属性，transition对她无效。(毫无争议)

visibility: hidden;

1、元素会被隐藏，但是不会消失，依然占据空间。
2、visibility: hidden会被子类继承，子类也可以通过显示的设置visibility: visible;来反隐藏。
3、visibility: hidden;不会触发该元素已经绑定的事件。
4、visibility: hidden;动态修改此属性会引起重绘。
5、visibility,transition对她无效。(亲测)

opacity=0

1、opacity=0只是透明度为100%,元素隐藏，依然占据空间。
2、opacity=0会被子元素继承,且，子元素并不能通过opacity=1，进行反隐藏。不能。
3、opacity=0的元素依然能触发已经绑定的事件。
4、opacity,transition对她有效(毫无争议)

摘自：http://blog.csdn.net/WRian_Ban/article/details/51958195

转载于:https://www.cnblogs.com/MY0101/p/6406766.html

display: none;、visibility: hidden、opacity=0区别总结相关推荐

css = display: none, visibility: hidden, opacity: 0 的区别
一. 页面结构 display: "none" 的元素其实并不会渲染,不会出现在页面中,不会占据位置,切换"显隐"时会触发渲染,所以会影响性能. visibil ...
CSS隐藏元素的几种方式以及display、visibility、opacity的区别
CSS隐藏元素的方式首先最通用且最易想到的方法肯定是display.visibility和opacity这三种了 display:none 设置元素不可见并且连盒模型也不生成,一般用于不占空间的隐藏 ...
display、visibility、opacity的区别
我们常设置display:none.visibility:hidden.opacity:0来隐藏元素,但是在实际使用中会有问题 (1)元素隐藏时是否在DOM中存在? display:不占据空间,会导致 ...
display、visibility和opactity的区别
1.display:none: DOM结构:浏览器不会渲染display属性为none的元素,不占据空间,意思就是页面上没有它的一席之地,你在开发者模式中选不中那个元素. 事件监听:无法进行DOM事件 ...
display:none和visibility:hidden两者的区别
使用css让元素不可见的方法有很多种,裁剪.定位到屏幕外边.透明度变换等都是可以的.但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden.很多公司的面 ...
基础总结（04）-- display:none;visibility:hidden;区别
display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...
display和visibility的用法和区别
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.visibility和display两个属性都有隐藏元素的功能.visibility ...
display:none和visibility:hidden和透明度的区别
**当想实现一个区域或者内容的消失(隐藏)**,我们有多种代码可以实现.但是根据要求和用户体验,应该选择最合适的方法实现.代码中最常用的代码包括:display:none; visibility:hi ...
Vue | 显示切换（v-if与v-show,display,visibility与opacity）
文章目录致读者(选读) 显示切换 1.动绑display 2.v-show 3.v-if 4.动绑visibility 5.动绑opacity 提问集合 watch监听若有疑问,欢迎评论,我会尽快 ...

最新文章

热门文章