一、 页面结构
- display: "none" 的元素其实并不会渲染，不会出现在页面中，不会占据位置，切换“显隐”时会触发渲染，所以会影响性能。
- visibility: "hidden" 的元素是会渲染的，它会占据页面中的位置（就好像 position: "relative" 的感觉一样，即使把元素left: 1080px，它也会占据原来的位置），切换“显隐”时会触发重绘，基本不影响性能。
- opacity: 0，"opacity"是不透明度的意思，顾名思义，它只是让元素变得不透明，1为完全不透明，0是完全透明，所以它也会在页面中占据位置（只是透明了，看不见），切换“显隐”时会触发重绘。
在这里就有一个小插曲了：什么是渲染？什么是重绘？
- 渲染： 这里所说的渲染其实指的回流，那什么是回流呢，回流就是当元素发生了会影响布局上变化的时候，页面需要重新构建，就会触发回流，重新渲染页面。
- 重绘： 通俗的说，就是元素发生了不影响布局结构的样式变化时，只是元素自身的外观发生了变化，就会触发重绘，比如改变color、background-color等等。
1、display: block
代码：
<body>
<p >我是吃瓜群众</p>
<p id="p1">我是主角</p>
<p >我是吃瓜群众</p>
<button onclick="document.getElementById('p1').style.display='block'">
Block
</button>
<button onclick="document.getElementById('p1').style.display='none'">
None
</button>
</body>
不妨、动手一试？
我是吃瓜群众
我是主角
我是吃瓜群众
2、visibility: hidden
代码：
<body>
<p >我是吃瓜群众</p>
<p id="p2">我是主角</p>
<p >我是吃瓜群众</p>
<button onclick="document.getElementById('p2').style.visibility='visible'">
Visible
</button>
<button onclick="document.getElementById('p2').style.visibility='hidden'">
Hidden
</button>
</body>
不妨、动手一试？
我是吃瓜群众
我是主角
我是吃瓜群众
3、opacity: 0
代码：
<body>
<p >我是吃瓜群众</p>
<p id="p3">我是主角</p>
<p >我是吃瓜群众</p>
<button onclick="document.getElementById('p3').style.opacity=0">
0
</button>
<button onclick="document.getElementById('p3').style.opacity=.5">
0.5
</button>
<button onclick="document.getElementById('p3').style.opacity=1">
1
</button>
</body>
不妨、动手一试？
我是吃瓜群众
我是主角
我是吃瓜群众