方式一. 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的,可以用来做动画效果。