您的位置:首页> 日志> 前端技术 正文
DTOP

css中元素不可见的几种办法

Alison | 2017年04月01日 |

>>收藏本文 已有 0条评论

周末的时候看了一会书,提到了这个visibility这个属性,所以把目前自己知道几种隐藏元素的标签也一一罗列出来,当做是一个小总结吧。

之前我很喜欢用display:none来达到隐藏元素,简单粗暴,但是可能你也会注意到其他的网站有些会用text-indent、position、还有些会用到visibility,假如他们只是用做隐藏文字或者div可见的情况下,我觉得基本都一样,写页面的人习惯用哪样就可以选择哪样的写法。下面我来说具体的一些写法哈。

 

1、display,这个属性是改变一个元素的显示效果,假如元素使用了none值,那么元素直接干净利落的消失不见。你在右键审查元素的时候找到该处会显示为0×0,不信你试试。之所以会完全没有看见是因为使用了display:none这个标签,使用none值会让元素从文档中直接删除,所以它没有对布局产生任何的影响,就是真的消失不见了,前台根本显示不出来。

*用法:*display:none

优点:简单暴力,不需要多余代码,缺点:元素从文档删除,对于seo不利

但是我们经常看见的很多的时候并不是使用代码,好像有些人喜欢用text-indent

 

2.text-indent,这个属性本来是用来设置文本缩进的,一般我们习惯是首行缩2个中文字所以一般的用法是text-indent:2em。但它允许负值,假如给它一个负值,这个负值足够大,大到一般我们浏览器无法显示,好像它跟浏览器宽度躲猫猫一样。假如说用户浏览器分辨率不够支撑其缩减的宽度,那么它就默认显示“没有”,但是它会占据网页空间,只不过是我们在前台“看不见”而已,但是它会影响到文档的布局,感觉它是悬挂在本文前面,一直挂到你电脑屏幕足够大显示它为止。

*用法:*text-indent:-999em

优点:利于搜索引擎,缺点:暂无 //有人说*text-indent:-999em缺点是隐藏在了一个太远的位置 导致影响到文档宽度,其实它并不是谁影响到文档宽度,它的作用其实就是把文字提到段落前面,不让我们看见,但是暂时不会影响其宽度,不过会影响到布局。

 

3.position,我们都知道position是用来定位元素的,数值可正可负,假如说一个元素的距离我们的视窗(电脑显示屏幕)足够大,大到我们浏览器也无法显示出来,那么它也是“消失”的。但是这种做法一般适用于比较写死的东西,比如说要标明以下文字是干嘛的,基本是不会有所改动:

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

优点:信手拈来,随意摆放,缺点:用法太死,不能随意修改,比较死板

 

4.visibility,这个属性也是可以达到隐藏元素的目的,这个属性也是跟display属性正好相反,这个也只是“看不见”而已。用了该属性属性之后,元素在前端页面是解析不出来的,但是元素依然存在在哪里,只不过我们肉眼不可见,所以元素依然会影响到布局。

*用法:*visibility:hidden

优点:相对display会利于SEO优化,缺点:该属性会继承,假如祖先用了visibility:hidden,那么子元素也是直接显示不见,想要子元素显示让用户看见,还要必须再多写visibility:visible

 

小结 :总体来说,对于一般元素隐藏用text-indent比较靠谱,对于浏览器来说也是非常友好的,目前暂时没有大的问题出现;假如说对于已经写死的标签那么就可以考虑用position标签,接下来是visibility,最后是display,因为这个标签属性会把元素直接从文档中del删除了。那么就看你怎么用了。(⊙o⊙)