正在读《精通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);
/* 不占据空间,无法点击 */
}
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。