隐藏元素的各种方法

隐藏元素的各种方法

1、display，使用none值会让元素从文档中直接删除，”直接消失不见了”

用法：display:none

优点：简单暴力，不需要多余代码。不占空间，对布局没影响。

缺点：元素从文档删除，不利于seo

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

用法：text-indent:-999em

优点：利于搜索引擎

缺点：它的作用其实就是把文字提到段落前面，不让我们看见，不影响宽度？

会影响布局。

3、position，假如说一个元素的距离我们的视窗（电脑显示屏幕）足够大，大到我们浏览器也无法显示出来，那么它也是“消失”的。但是这种做法一般适用于比较写死的东西。

用法：position:absolute; top:-999em或者left:-999em

或 position:absolute; visibility:hidden;

优点：信手拈来，随意摆放

缺点：用法太死，不能随意修改，比较死板

4.visibility，只是“看不见”而已，所以元素依然会影响到布局

用法：visibility:hidden

优点：利于SEO优化

缺点:该属性会继承，假如祖先用了visibility:hidden，那么子元素也是直接显示不见，想要子元素显示让用户看见,还要必须再多写visibility：visiblel

---

5.position:absolute (通过定位将元素定到远离页面的位置，脱标)
cli-path:polygon(0px 0px , 0px 0px,0px 0px,0px 0px) (通过裁剪盒子，不脱标)
6. position:absolute;与clip:rect(0px 0px 0px 0px)配合 (通过裁剪绝对定位的盒子，脱标)
7. 设置 height=0；border=0;margin=0; 这种占位置，文字会显示出来，还要设置overflow=“hidden”;这样可以不占位置
8. filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中
9. transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留
10 .jquery：

　　$("selector").hide();
　　$("selector").show();

注：隐藏后不占用位置

11. v-show 隐藏 是display:‘none’
    12, v-if 隐藏是 visibility:hidden;

区别是

display:none和visibility:hidden的区别是：

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。