温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

关于CSS中隐藏内容方法的思考

发布时间:2020-07-17 14:59:16 来源:网络 阅读:512 作者:FrontDream 栏目:开发技术

    正在读《精通CSS》,很多样式需要用到内容隐藏,比如平时无内容,鼠标悬停时显示出内容。书中常用的方法是用text-indent:-1000em、margin-left:-1000em将元素隐藏到屏幕边缘之外,而display:none和visibility:hidden、overflow:hidden也可以做到隐藏,那么这几种用法有哪些利弊呢?


1.display:none;

搜索引擎可能认为被隐藏的元素属于垃圾信息而忽略,不利于SEO;屏幕阅读器会忽略被隐藏的元素。


2.visibility:hidden

可以实现隐藏元素在前台的显示,但它的位置不会被后边的元素抢占。


3.overflow:hidden

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

如上所示,将宽度和高度设定为0,然后超过部分隐藏,这是一种较为合理的隐藏方式。


4.text-indent:-1000em、margin-left:-1000em

这种隐藏方式在不同的浏览器下可以会产生未知的效果。


一般情况下,css隐藏的用途:
1、对文本的隐藏
2、隐藏超链接(另类黑链)
3、对统计代码隐藏
4、隐藏超出图片
5、css隐藏滚动条
6、css来隐藏div层

使用css隐藏方法
1、使用display:none;来隐藏所有信息(无空白位占据)
2、使用overflow:hidden;来隐藏溢出的文字或图片
3、使用overflow-y:hidden;和overflow-x:hidden控制滚动条的隐藏与否


转载其他隐藏内容的方式:

{ display: none; /* 不占据空间,无法点击 */ } 
/********************************************************************************/
{ visibility: hidden; /* 占据空间,无法点击 */ } 
/********************************************************************************/
{ position: absolute; top: -999em; /* 不占据空间,无法点击 */ } 
/********************************************************************************/
{ position: relative; top: -999em; /* 占据空间,无法点击 */ } 
/********************************************************************************/
{ position: absolute; visibility: hidden; /* 不占据空间,无法点击 */ } 
/********************************************************************************/
{ height: 0; overflow: hidden; /* 不占据空间,无法点击 */ } 
/********************************************************************************/
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间,可以点击 */ } 
/********************************************************************************/
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间,可以点击 */ } 
/********************************************************************************/

zoom: 0.001; 
-moz-transform: scale(0); 
-webkit-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 
/* IE6/IE7/IE9不占据空间,IE8/FireFox/Chrome/Opera占据空间。都无法点击 */ 

/********************************************************************************/

position: absolute; 
zoom: 0.001; 
-moz-transform: scale(0); 
-webkit-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 
/* 不占据空间,无法点击 */ 


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI