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

    正在读《精通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); 
/* 不占据空间，无法点击 */ 
}