1. display:none;
把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉。当display设置为none,任何对该元素直接的用户交互操作都不可能生效。
2. visibility:hidden;
该元素隐藏起来了,不会改变页面布局,仍占据原有空间,但不会触发该元素已经绑定的事件。
3. opacity:0;filter:alpha(opacity=0);
该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件的它只是一种视觉隐藏,将元素变得透明。元素本身依旧占用它的位置。
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)
通过缩放达到元素消失的视觉效果,元素仍占据空间