我们在写前端页面时，隐藏内容可以说是比较常用的手法，它的作用一般有：隐藏文本/图片、隐藏链接、隐藏超出范围的内容、隐藏滚动条、隐藏弹出层、清除错位和浮动等。 今天我们分享下通过CSS实现网页内容/元素隐藏的几个方法。
一、CSS隐藏内容主要有3个情况
1、隐藏所有内容无空白：display: none;
2、隐藏溢出的文字或图片：overflow:hidden;
3、隐藏内容但是仍然占据空间：visibility:hidden;
二、几种有seo作弊嫌疑的方法
1、display:none
写法：文字看不见
2、文本缩进负值
写法：文字看不见
3、文字大小为0
写法：文字看不见
4、width和height为0+防止溢出
写法：文字看不见
5、绝对定位负值方法
写法：文字看不见
6、绝对定位+margin负值方法
写法：文字看不见
三、其它让内容/元素隐藏的方法
{ 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); /* 不占据空间，可以点击 */ }
最后讲下，display:none 虽然简便有效，但对搜索引擎不友好，且被屏幕阅读器所忽略。overflow:hidden 是比较合理的方法，推荐写法{ display:block; overflow: hidden; width: 0; height: 0; }，将宽度和高度设定为0，然后超过部分隐藏，弥补内容会占据所在空间的缺陷，也达到了隐藏内容的目的。
本文地址： https://www.krseo.com/web/141.html
版权声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。
免责声明：本文内容由互联网用户自发贡献自行上传，本网站也不承担相关的法律责任。如果您发现本文章中有涉嫌抄袭的内容，请发送邮件至：sales@sznetsoft.com或者至电给本网站进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权的内容。