CSS隐藏元素的几大方法

CSS隐藏元素的几大方法

1. display：none；

   使用none值会让元素从文档中直接删除，”直接消失不见了”，但是设置为display为none的元素还是会留在DOM树中，只是没有在渲染树中；

2. visibility：hidden；

   只是“看不见”而已，所以元素依然会影响到布局（所以在DOM树中以及渲染树中是会有该节点的），要注意的是，该属性会继承，假如祖先用了visibility:hidden，那么子元素也是直接显示不见，想要子元素显示让用户看见，还要必须再多写visibility：visible；

3. transform：scale(0)

   让元素缩放到最小，在页面上是不可见的，但是还是会挂在渲染树上，并且依然会影响到布局。

4. opacity：0；

   只是将元素的透明度设为0了，还是会影响布局。

5. z-index：-9999（设置为最低的层级）

6. 设置position，使其脱离文档流，然后给一个很大的left，让其在视口外

   假如说一个元素的距离我们的视窗（电脑显示屏幕）足够大，大到我们浏览器也无法显示出来，那么它也是“消失”的。但是这种做法一般适用于比较写死的东西。
   用法：position:absolute; top:-999em或者left:-999em或 position:absolute; visibility:hidden;

7. text-indent

   一般是首行缩2个中文字的用法是text-indent:2em。但当给他一个足够大的负值，大到一般我们浏览器无法显示。
   用法：text-indent:-999em

8. filter: blur(0); 将一个元素的模糊度设置为0, 从而使这个元素“消失”在页面中 。