CSS：display、visibility、opacity 的详解与比较

旧城等待， 2022-11-17 05:51 277阅读 0赞

**目录**

一、简介

1、display

2、visibility

3、opacity

二、知识点补充

1、浏览器渲染过程

2、回流

3、重绘

4、回流与重绘的区别

三、区别

1、空间占据

2、回流与渲染

3、株连性

4、关于事件

5、关于transition

四、知识点延伸

1、display

2、visibility

3、opacity

--------------------

## **一、简介** ##

### 1、display ###

*  规定元素应该生成的框的类型。
 *  将DOM元素设置为隐藏，该隐藏是不占位置的，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”。

### 2、visibility ###

*  规定元素是否可见。
 *  将透明度设置为0，仅仅是看不见而已，还是占位置的。审查元素的时候还是可以找的到的。

### 3、opacity ###

*  设置一个元素的透明度级别。
 *  将DOM元素设置为隐藏，但是该隐藏仅仅是看不见而已，还是占位置的，也即是说它仍具有高度、宽度等属性值。

下面看这三行代码:

display:none;
    visibility:hidden;
    opacity:0;

我们可以知道这三条属性所形成的元素效果是一样的，但是他们本质上有什么区别呢?

--------------------

## 二、知识点补充 ##

### 1、浏览器渲染过程 ###

1.  处理 HTML 标记并构造 DOM 树。
2.  处理 CSS 标记并构造 CSSOM 树。
3.  将 DOM 与 CSSOM 合并成一个渲染树。
4.  根据渲染树来布局，以计算每个节点的几何信息。
5.  将各个几点绘制到屏幕上。

### 2、回流 ###

浏览器在加载页面的时候会生成一个render（渲染）树，加载完成后当渲染树中的某一些元素发生了比如形状，尺寸，隐藏，由于元素之间位置的相互关系发生改变，都会使渲染树发生改变，从而需要重新构建渲染树，这叫**回流**。

### 3、重绘 ###

当渲染树中的某些元素发生的改变不会影响个元素之间的位置关系，比如color，background等只是改变外观，则不需要重建渲染树，这就叫做**重绘**。

### 4、回流与重绘的区别 ###

当发生回流时一定发生了重绘，但是当发生重绘时则不一定发生回流

详见请查阅[浏览器的回流、重绘、优化][Link 1]

--------------------

## 三、区别 ##

### 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);

[Link 1]: https://mp.csdn.net/editor/html/115380786