元素隐藏之display:none、visibility:hidden、opacity:0、overflow:hidden区别

方式一. display:none

表示彻底消失，不在文档流中占位，浏览器也不会解析该元素(看不见摸不着)；

方式二. visibility:hidden

表示视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素（看不到摸不着）；

方式三. opacity:0

表示看不见摸得着，元素隐藏，依然占据空间；

方式四. overflow:hidden

这种方式会使得超出的元素隐藏，对行内元素无效，必须是块级元素，隐藏之后元素依然占据着位置。

★ display: none和visibility: hidden和opcaity: 0三者这件的区别是什么？

1. DOM结构

● display：none，浏览器不会渲染该元素，元素不占据空间；
● visibility: hidden，元素被隐藏，但是会被渲染，依然占据空间；
● opacity: 0，本质是设置透明度为0，元素隐藏，依然占据空间。

2. 事件绑定

● display: none，元素在页面已经不存在了，所以在它上面绑定的事件无法触发。
● visibility: hidden，元素虽然占据一定空间，但是在它上面绑定的事件是无法触发。
● opacity: 0，元素上面绑定的事件是可以触发的。

3. 性能

● display: none，会产生回流和重绘，性能较差。
● visibility: hidden, 动态改变此属性会引起重绘，性能较高。
● opacity: 0，提升为合成层，不会触发重绘，性能较高。

4. 继承

● display: none，不会被子元素继承，因为子元素不会被渲染。
● visibility: hidden，会被子元素继承，子元素可以通过设置visibility: visibile来取消隐藏。
● opacity: 0，会被子元素继承，并且子元素无法通过opacity:1来取消隐藏。

5. 关于transition

● display: none无法使用transition动画的,不会呈现过渡的效果。
● transition是支持visibility的,visibility过渡过程的值范围是0-1,但是,当visibility的值大于0,显示都是一样的。
● transition是支持opacity的,可以用来做动画效果。