display和visbility顾名思义都是为了暗藏页面元素，上面来看看二者的区别。opacity最初再说。

一、display：none

1、给元素设置了display:none属性后，该元素就暗藏了，占用的空间也隐没了。
原来是这样：

    <div>      <button>A按钮</button>      <button>B按钮</button>      <button>C按钮</button>    </div>

加了display:none 属性后

    <div>      <button>A按钮</button>      <button style="display: none">B按钮</button>      <button>C按钮</button>    </div>

事实证明，“B按钮” 占用的空间也隐没了。

2、给父元素设置display:none属性后，子属性也跟着暗藏。
原来的样子：

    <div>      <button>A按钮</button>      <button>B按钮</button>      <button>C按钮</button>      <ol>        <li>hello</li>        <li>hello2</li>      </ol>    </div>

给父元素加上display:none后，子元素都隐没了

    <div>      <button>A按钮</button>      <button>B按钮</button>      <button>C按钮</button>      <ol style="display: none">        <li>hello</li>        <li>hello2</li>      </ol>    </div>

即便给子元素加上block也不会显示。

  <div>     <button>A按钮</button>     <button>B按钮</button>     <button>C按钮</button>     <ol style="display: none">       <li style="display: block">hello</li>       <li>hello2</li>     </ol>   </div>


3、因为display:none后元素就隐没了，在li标签下会影响计数。比方
原来的代码：

    <div>      <button>A按钮</button>      <button>B按钮</button>      <button>C按钮</button>      <ol>        <li>hello</li>        <li>hello2</li>        <li>hello3</li>      </ol>    </div>


给子元素加上暗藏：

  <div>     <button>A按钮</button>     <button>B按钮</button>     <button>C按钮</button>     <ol>       <li>hello</li>       <li style="display: none">hello2</li>       <li>hello3</li>     </ol>   </div>

因为子元素被暗藏了，上面的元素就主动上移了。

二、visibility:hidden

1、应用visibility暗藏属性后，元素依然占用原来的页面空间。

 <div>   <button>A按钮</button>   <button style="visibility: hidden">B按钮</button>   <button>C按钮</button> </div>

暗藏后

2、父元素会影响子元素，以及如果子元素设置显示后，会打消暗藏属性。

<div>      <button>A按钮</button>      <button>B按钮</button>      <button>C按钮</button>      <ol style="visibility: hidden">        <li>hello</li>        <li>hello2</li>        <li>hello3</li>      </ol>    </div>

 <div>   <button>A按钮</button>   <button>B按钮</button>   <button>C按钮</button>   <ol style="visibility: hidden">     <li>hello</li>     <li style="visibility: visible">hello2</li>     <li>hello3</li>   </ol> </div>

由此可见，第三点，visibility也不会影响计算，只是给暗藏的那些元素披上了隐身衣而已，不会影响别的元素。

最初一点：
首先理解下浏览器的渲染过程：
1.解析HTML，依据文档构建DOM树
2.解析CSS样式表，构建CSSOM(CSS Object Model)
3.将DOM和CSSOM进行合并生成Render Tree(渲染树)；在DOM树根底上依据节点的属性（margin/padding/width/height）生成reder树，不包含display:none、head节点但包含visibility：hidden节点）
4.依据Render Tree计算布局，计算每个元素的地位，又叫layout的reflow过程
5.根据Render Tree进行渲染，调用操作系统的 Native GUI的API绘制。

其次理解两个概念，重绘和回流
1.重绘(repoint):当Render Tree中的一些元素须要更新属性，但这些属性只会影响元素的外观，格调，而不会影响布局。
2.回流(reflow)：当Render Tree中的一部分(或所有)因为其中元素的规模尺寸、布局、暗藏等扭转而须要从新构建Render Tree。

因为display:none 会扭转页面布局，所以会触发reflow(回流)，而visibility:hidden并不影响 页面布局，只是给元素穿上了“隐身衣”，所以只会触发 repoint(重绘)

总结：

(上面display:none就简写为display，visibility:hidden就简写为visibility)
1） display的暗藏会间接把元素去掉，其占用的空间也隐没；visibility相同，只是给暗藏的元素穿了层“隐身衣”，其占用的空间并不会隐没。
2） display父元素设置为暗藏后子元素也会暗藏，然而子元素若设置为显示并不见效；
visibility父元素暗藏子元素暗藏，父元素暗藏子元素显示会见效。
3) display因为间接把元素去掉了，所以会影响计数，比方下面例子里的li标签，就上面的元素主动替补被暗藏的元素了。visibility因为只是单纯的暗藏，所以不会影响计数。
4）因为display影响页面布局，所以会触发reflow（回流），visibility则只会触发repoint（重绘）。

一言半语汇成一句话

就是display把一个元素丢出界面，所以空间会隐没、别的元素会替补以及触发回流(从新布局)。而visibility只是给元素穿了个“隐身衣”，所以其空间还在、不会影响计数、只会触发重绘(布局不变，然而要减少“隐身衣”成果。)

补充：其实还有个办法能够暗藏元素，那就是opacity:0，这个属性是设置透明度的，取值范畴是0-1，设置为0就是暗藏了，1就是齐全显示，这个办法和visibility的特质一样，简而言之就是给元素穿了隐身衣而已。

参考文章：
浏览器的渲染原理简介：https://coolshell.cn/articles...