如何通过CSS达成网页内容 元素的隐藏？
发布时间：2022-03-02 19:07:28 所属栏目：建站 来源：互联网
导读：我们在写前端页面时，隐藏内容可以说是比较常用的手法，它的作用一般有：隐藏文本/图片、隐藏链接、隐藏超出范围的内容、隐藏滚动条、隐藏弹出层、清除错位和浮动等。 今天我们分享下通过CSS实现网页内容/元素隐藏的几个方法。 一、CSS隐藏内容主要有3个情况
|
我们在写前端页面时，隐藏内容可以说是比较常用的手法，它的作用一般有：隐藏文本/图片、隐藏链接、隐藏超出范围的内容、隐藏滚动条、隐藏弹出层、清除错位和浮动等。 今天我们分享下通过CSS实现网页内容/元素隐藏的几个方法。 一、CSS隐藏内容主要有3个情况 1、隐藏所有内容无空白：display: none; 2、隐藏溢出的文字或图片：overflow:hidden; 3、隐藏内容但是仍然占据空间：visibility:hidden; 二、几种有seo作弊嫌疑的方法 1、display:none 写法：<p style="display:none">文字看不见</p> 2、文本缩进负值 写法：<p style="text-indent:-99999px">文字看不见</p> 3、文字大小为0 写法：<p style="font-size:0">文字看不见</p> 4、width和height为0+防止溢出 写法：<p style="width:0; height:0; overflow:hidden;">文字看不见</p> 5、绝对定位负值方法 写法：<p style="position: absolute; left:-6600px; top:-1000px;">文字看不见</p> 6、绝对定位+margin负值方法 写法：<p style="position:absolute; margin-top:-9999px; margin-left:-9999px; ">文字看不见</p> 三、其它让内容/元素隐藏的方法 { 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，然后超过部分隐藏，弥补内容会占据所在空间的缺陷，也达到了隐藏内容的目的。 （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
