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的
网友评论