用css隐藏页面元素的六种方法

用css隐藏页面元素的六种方法

1.display: none;

真正意义上的隐藏，页面源码都不显示隐藏的页面源码，隐藏的元素不占用任何空间，元素的盒空间都不生成，好像元素就不存在，但是可以通过DOM操作访问到

2.visibility: hidden;

显示不可见，元素位置处显示一块空白，会影响布局，不过不会影响交互操作。

3.opacity:0

设置元素的透明度，会影响页面布局 但只是不可见 元素位置显示一块空白，会影响页面交互操作

4. position: absolute; top: -9999px; left: -9999px;

position属性将元素移出原来的页面显示（像是页面上的又一层）并可以与之交互

5.width: 0;height: 0;

这个方法挺奇葩的，直接把宽高设置为0就好了

6.transform: scale(0,0);

使用2d转换的缩放特效，将缩放的款高变成0就可以了