隐藏页面元素

hidden、display: none、visibility: hidden、opacity=0
这几种方法都可以隐藏页面元素，但是hidden是html属性，其余三种是样式，另外它们还有以下区别：

hidden

hidden是html5新增加的属性，具体用法如下：
<p hidden="hidden">这是一段隐藏的段落。</p>
hidden属性实际上是为元素添加了display: none 样式。

---

display: none;

• 浏览器不会生成属性为display: none;的元素。
• display: none 不占据空间（不渲染所以不占空间），所以动态改变此属性时会引起重排。
• display: none 不会被子类继承，但是子类也不会显示。

---

visibility: hidden;

• 元素会被隐藏，但是不会消失，依然占据空间。
• visibility: hidden 会被子类继承，子类也可以通过显示的设置visibility: visible;来反隐藏。
• visibility: hidden 不会触发该元素已经绑定的事件。
• visibility: hidden 动态修改此属性会引起重绘。

---

opacity=0

• opacity=0 只是透明度为100%，元素隐藏，依然占据空间。
• opacity=0 会被子元素继承，但子元素并不能通过opacity=1，进行反隐藏。
• opacity=0 的元素依然能触发已经绑定的事件。