使元素消失隐藏出现的方法

1、display:none；------display:block;
2、visibility:hidden；--------visibility: visible;
3、opacity:0；-------------opacity:1;
4、position定位定到到窗口外面
5、z-index进行层次的遮盖
6. transform:rotateY(90deg);
7. transform: scale(0,0)
8. 盒子模型属性为0

1. display:none；------display:block;

• 给box2设置display:none；隐藏之后不占位置；
• display:none—不会被子元素继承，父元素都不存在了，子元素也不会显示出。
• display:none 的元素都已经不再页面存在了，因此无法触发它绑定的事件。
• transition对于display是无效的。
• 如果想让元素缓慢出现用opacity

visibility:hidden；--------visibility: visible;

• （ 隐藏之后占位置）
• visibility:hidden—会被子元素继承，通过设置子元素visibility:visible来显示子元素。
• visibility:hidden 不会触发它上面绑定的事件。
• transition对于visibility是无效的。

opacity:0；-------------opacity:1;

• （ 隐藏之后占位置）
• opacity:0—会被子元素继承，但是不能设置子元素opacity:0来重新显示。
• opacity: 0如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的它只是一种视觉隐藏，将元素变得透明
• transition对于opacity是有效。

4. z-index:-1000;
      将元素隐藏不占据空间，会改变页面布局，不能进行交互事件

5. position:absolute;top:-1000px;left:-1000px;
      这个方法是通过将left和top的值设的很大，让元素定位到浏览器外面。不占据空间，不能点击将定位方式设置为relative或者fixed然后将其定位到浏览器外面可以达到同样的效果，区别在于使用relative定位仍会占有原有的空间，而使用absolute以及fixed定位不占据空间

6. transform:rotateY(90deg);
      使用3d旋转，使元素隐藏，旋转x轴也可以达到同样的效果，要注意的是，css3 3D转换元素进行使用的时候，必须给父元素添加transform-style:preserve-3d;perspective:1000px;用于提供3D空间，以及设置景深

7. transform: scale(0,0)
      通过缩放达到元素消失的视觉效果，元素仍占据空间

8. overflow:hidden;
超出文本隐藏
9.盒子模型属性为0
width:0;
height:0;
border:0;
margin:0;
padding:0;
如果有溢出内容+overflow:hidden;