CSS：display、visibility、opacity 的详解 与比较
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS：display、visibility、opacity 的详解 与比较，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3116字，纯文字阅读大概需要5分钟。
内容图文
目录
一、简介
1、display
- 规定元素应该生成的框的类型。
- 将DOM元素设置为隐藏，该隐藏是不占位置的，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”。
2、visibility
- 规定元素是否可见。
- 将透明度设置为0，仅仅是看不见而已，还是占位置的。审查元素的时候还是可以找的到的。
3、opacity
- 设置一个元素的透明度级别。
- 将DOM元素设置为隐藏，但是该隐藏仅仅是看不见而已，还是占位置的，也即是说它仍具有高度、宽度等属性值。
下面看这三行代码:
display:none;
visibility:hidden;
opacity:0;我们可以知道这三条属性所形成的元素效果是一样的，但是他们本质上有什么区别呢?
二、知识点补充
1、浏览器渲染过程
- 处理 HTML 标记并构造 DOM 树。
- 处理 CSS 标记并构造 CSSOM 树。
- 将 DOM 与 CSSOM 合并成一个渲染树。
- 根据渲染树来布局，以计算每个节点的几何信息。
- 将各个几点绘制到屏幕上。
2、回流
浏览器在加载页面的时候会生成一个render（渲染）树，加载完成后当渲染树中的某一些元素发生了比如形状，尺寸，隐藏，由于元素之间位置的相互关系发生改变，都会使渲染树发生改变，从而需要重新构建渲染树，这叫回流。
3、重绘
当渲染树中的某些元素发生的改变不会影响个元素之间的位置关系，比如color，background等只是改变外观，则不需要重建渲染树，这就叫做重绘。
4、回流与重绘的区别
当发生回流时一定发生了重绘，但是当发生重绘时则不一定发生回流
详见请查阅浏览器的回流、重绘、优化
三、区别
1、空间占据
- display: none会使元素脱离文档流,不占据原来的空间。
- visibility: hidden和opacity: 0 虽然会使元素不可见,但是元素仍然占据原来的位置。
2、回流与渲染
- display:none使元素位置改变，会产生回流与渲染。
- visiblity:hidden与opacity:0使元素的属性发生改变，不会产生回流与渲染，会产生重绘。
3、株连性
- display: none,虽然被隐藏的子元素也会一起隐藏,并且当子元素设置display:block属性时并无效果。
- opacity:0也是一样的。当父级已经设置opacity:0后，子元素是基于父元素的opacity:0基础上的opacity值。无论子元素设置opacity为多大时均无效果。
- visibility:hidden就不一样了,我们将visibility的子元素设置为visibility:visibile时仍会起效果。
4、关于事件
- display:none属性使该元素无法再触发事件。
- visibility:hidden也无法触发事件。
- opacity: 0仍然可以触发事件。
5、关于transition
- display: none无法使用transition动画的,不会呈现过渡的效果
- transition是支持visibility的,visibility过渡过程的值范围是0-1,但是,当visibility的值 大于0,显示都是一样的。
- transition是支持opacity的,可以用来做动画效果
注意：这里有一个简单的例子可以很方便的区分display与visibility。
- display:none是个相当惨无人道的声明，子孙后代全部被牵连至死（株连性），而且连块安葬的地方都不留（不留空间），导致百姓哗然（渲染与回流）。
- visibility:hidden则具有人道主义关怀，虽然不得已害死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），百姓比较淡然（无渲染与回流）。
四、知识点延伸
1、display
display的属性：block（默认值，设置为块级元素，独占一行），inline（设置为行内元素，不独占一行），none（设置为隐藏）
2、visibility
visibility的属性：visible（默认值，设置为可见），hidden（设置为不可见），inherit（继承上级的visibility），collapse（只对table有用）
3、opacity
需要考虑兼容性问题，低版本的IE是filter:alpha(opacity=50);
内容总结
以上是互联网集市为您收集整理的CSS：display、visibility、opacity 的详解 与比较全部内容，希望文章能够帮你解决CSS：display、visibility、opacity 的详解 与比较所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。