实现html隐藏效果的三剑客

html世界存在三位身怀隐藏绝技的剑客，分别是display：none、visibility: hidden和opacity:0。它们虽然师出同门（都具备隐身绝技），但是各自风格鲜明，招式不一。今天teren君就为诸位看客逐一剖析，娓娓道来。

---

• display:none是最常用的隐藏元素的方法
  • 元素使用该属性将：不占据空间，无法点击；
  • 元素在页面上将完全消失；
  • 元素原本占据的空间被其他元素所占据，从而导致
    浏览器的重排和重绘；

上图分别是display:none和未设置display:none的效果图

---

• visibility:hidden也是常用的隐藏元素的一种方法
  • 元素在页面消失，但仍然占据空间
  • 只导致浏览器重绘不导致重排
  • 适用于那些元素隐藏后不希望页面布局会发生变化的场景

上图的第二个红色框表示visibility:hidden，此时点击第二个红色框，控制台是没有信息输出的，因为按钮及其功能已经隐藏

---

• opacity:0表示元素的透明度是完全透明，起到一种隐藏效果
  • 与visibility:hidden类似，元素在页面消失且仍然占据空间
  • 但按钮及其功能仍然存在，只是肉眼看不见

上面第一个红色框使用的是opacity:0，在点击第一个红色框，控制台是可以输出信息1的