css div 隐藏网站内容

Posted 2023-05-16

div+css隐藏内容方法

一般情况下，css隐藏的用途

1、对文本的隐藏

2、隐藏超链接（另类黑链）

3、对统计代码隐藏

4、隐藏超出图片

5、css隐藏滚动条

6、css来隐藏div层

使用css隐藏方法

1、使用display:none;来隐藏所有信息（无空白位占据）推荐，CSS display手册查看

2、使用overflow:hidden;来隐藏溢出的文字或图片 适用推荐，css overflow手册查看

3、使用overflow-y:hidden;和overflow-x:hidden控制滚动条的隐藏与否，css overflow-y手册查看，css手册查看overflow-x 

常见div css隐藏案例

1、对display:none;文本图片的隐藏如

<div style="display:none;">你是看不见我的</div>

使用div 中css样式display:none;将使得div内的内容隐藏通过浏览器什么也看不见，并且隐藏的内容也不会占用空间。通过此方法可以隐藏超链接文本（黑链）和图片等内容同时也会隐藏div层样式。推荐使用隐藏内容。

2、overflow: hidden 隐藏内容或图片

实例如：

我是可以看见的<br/><br/>

<div style="overflow: hidden; width:30px; height:20px;">你是看不见我的。</div>

<br/>

同样我也是可以看见的

使用css样式通过对“你是看不见我的”div css层设置固定的高和宽，然后通过overflow: hidden样式即可使得超出固定的高宽内容隐藏同时也不占用被隐藏地方位置。

3、使用overflow-y:hidden;和overflow-x:hidden来隐藏或显示对应横或竖方向的滚动条。此案例可以进入css手册的overflow-y和css在线手册的overflow-x有详细的讲解对滚动条的设置隐藏或显示方法。

参考技术A 在要隐藏的div上加样式 display:none;

CSS中如何让元素隐藏？

1、使用display:none来隐藏所有内容

display:none可以让网页中所有内容不显示，如代码、文字、链接、图片、div层，是推荐的内容隐藏方式。
<div style="display:none;">我不占地儿，你看不见我；</div>

2、使用visibility:hidden来隐藏内容

visibility:hidden和display:none可以隐藏的内容几乎一样，但唯一区别是它虽然隐藏了内容，但被隐藏掉的内容仍旧占据空间，这段隐藏了内容却保留空间的位置会在网页中显示为空白。
<div style="visibility:hidden;">我占了地儿，你也看不见我；</div>

3、使用overflow:hidden隐藏溢出内容

overflow:hidden这种方式可以隐藏掉固定区域外的内容，它可以有效控制显示区域。但应注意，使用它时需要给它定义宽度和高度，否则会无效。
<div style="width:120px; height:20px; overflow:hidden;">我占的地儿太多了你就看不见我的尾巴了。。。。。</div>overflow用法中存在一个分支，overflow-x:hidden和overflow-y:hidden，x是横向范围，y是纵向范围，这两个属性经常用在需要隐藏滚动条时。

参考技术A 在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。下面一个个列出，选一个适合你的 display: none; /* 不占据空间，无法点击 */ visibility: hidden; /* 占据空间，无法在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。下面一个个列出，选一个适合你的 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);/* 不占据空间，无法点击 */本回答被提问者采纳 参考技术B 在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。下面一个个列出，选一个适合你的 display: none; /* 不占据空间，无法点击 */ visibility: hidden; /* 占据空间，无法
在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。下面一个个列出，选一个适合你的
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);
/* 不占据空间，无法点击 */ 参考技术C

让元素隐藏有2种方式：

display:none:    元素不占据空间；

visibility:hidden     元素隐藏仍然会占据之前的空间

详情可以参考http://jingyan.baidu.com/article/54b6b9c0f7ae0c2d583b47e1.html