1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > css隐藏文字的5个方法 – CSS – 前端 css3 页面过渡效果

css隐藏文字的5个方法 – CSS – 前端 css3 页面过渡效果

时间:2020-11-04 01:52:25

相关推荐

css隐藏文字的5个方法 – CSS – 前端 css3 页面过渡效果

今天就来分享5个关于如何去通过CSS隐藏文字或者HTML:

1、display: none;

display: none几乎是每一个学会CSS基础的人都喜欢用的隐藏方法,这种方法简单暴力,但其实使用display: none进行隐藏,也会隐藏掉隐藏对象原有的占位空间,消失了无痕迹!

2、visibility: hidden;

和display:none; 相对应,为隐藏的对象保留物理占位空间。

3、overflow: hidden;

overflow: hidden也是可以让对象隐藏的无影无踪,大家最常用overflow: hidden的作用是清除浮动吧,但如果让对象的width和height都为0的话,再加上overflow: hidden就可以让对象直接消失,比如:

.text{display:block;overflow:hidden;width:0;height:0;}

其中.text没有宽和高,切记!

4、positon: absolute;

用绝对定位将其推出可视区,不过虽然可视性不存在,但仍占据物理空间,与隐藏文字的宗旨相背,另外偶个人不喜欢用绝对坐标定位magin这个属性,margin在不同浏览器中总是带来不可预料的Bug。

.text{positon:absolute;margin-top:-9999px;margin-left:-9999px;}

5、text-indent: -9999px

text-indent: -9999px的这种方法,偶最常见到的用途几乎是在logo上,比如HTML:

<ahref="/">老白zblog</a>

以上这段代码如果是logo的话,并且显示图片,就只能通过背景图片的方式,把logo图显示出来,但老白zblog这几个文字又必须消失,不能与logo背景图片同时存在吧,所以此时,最好的方法就是使用text-indent: -9999px,把文字甩到屏幕找不到的地方,这种logo方法既能显示图片,又能对SEO很友好!

a{height:30px;width:165px;float:left;text-indent:-9999px;/*把老白zblog这几个文字甩出去*/background-image:url(images/logo.gif);/*背景图片*/background-repeat:no-repeat;/*背景图片不重复*/display:block;/*把a设置为块级元素*/position:relative;}

以上5种方法都可以实现隐藏的目的,但用途和用法又有着很大的区别,必须活血活用,直接套用任何一个都不能成为一个好的前端!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。