参考链接

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

display: none、visibility: hidden与opacity: 0的区别

第 57 题：分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景 #100

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

结构：

display: none; 会让元素完全从渲染树中消失，渲染的时候不占据任何空间。

visibility: hidden; 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见。

opacity: 0; 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见。

继承：

display: none; 和 opacity: 0; 是非继承属性，通过修改子孙节点属性无法显示。

visibility: hidden; 是继承属性，通过设置 visibility: visible; 可以让子孙节点显示。

性能：

display: none; 触发回流(重排)，消耗性能较大

visibility: hidden; 触发重绘，消耗性能较少

opacity: 0; 一般情况会造成重绘，使用 anmimation 动画则不触发重绘，重建图层，性能较高

• 在一般情况下，opacity 会触发重绘，即 Recalculate style => Update Layer Tree。不管你是否开启GPU提升为合成层与否
• 如果利用 animation 动画，对 opacity 做变化（animation会默认触发GPU加速），则只会触发 GPU 层面的 composite，不会触发重绘。

事件监听：

display: none; 和 visibility: hidden; 无法进行 DOM 事件监听。

opacity: 0; 可继续监听 DOM 事件。

transition:

前端新手村Transition

CSS animated properties

(测试案例见补充)

• display 不被 transition 支持。
• visibility 会立即显示，隐藏时会延时。
• opacity 可以延时显示和隐藏。

补充

transition

HTML

<input id="c1" type="checkbox">
<div class="box"></div>

CSS

#c1:checked ~ .box {
    display: block;
    /*visibility: visible;*/
    /*opacity: 1;*/
}
.box {
    height: 100px;
    width: 100px;
    background-color: #0a0;
    margin-left: 50px;
    transition: 1s -.3s linear;
    display: none;
    /*visibility: hidden;*/
    /*opacity: 0;*/
}

display

visibility

opacity

ol + li

使用 ol+li 计数时，display: none 的 li 是不参与计数的，而 visibility: hidden 和 opacity: 0; 参与计数。

HTML

<p>这是ol + li</p>
<ol>
    <li class="one">1</li>
    <li>2</li>
    <li>3</li>
</ol>

CSS

.one { display: none; }

.one { visibility: hidden; }

.one { opacity: 0; }

搜索引擎会过滤掉display: none 中的内容。