CSS中如何让元素隐藏？
答案:5 悬赏:20 手机版
解决时间 2021-11-11 01:25
- 提问者网友：做自己de王妃
- 2021-11-10 16:49
CSS中如何让元素隐藏？
最佳答案
- 五星知识达人网友：山君与见山
- 2021-09-08 08:08
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是纵向范围，这两个属性经常用在需要隐藏滚动条时。
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是纵向范围，这两个属性经常用在需要隐藏滚动条时。
全部回答
- 1楼网友：大漠
- 2021-01-29 06:07
在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。下面一个个列出，选一个适合你的 { display: none; } { visibility: hidden; }
{ 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);
}{
position: absolute;
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
}
- 2楼网友：洒脱疯子
- 2021-09-30 20:12
让元素隐藏有2种方式：
1. display:none: 元素不占据空间；
2. visibility:hidden 元素隐藏仍然会占据之前的空间
详情可以参考http://jingyan.baidu.com/article/54b6b9c0f7ae0c2d583b47e1.html
- 3楼网友：孤老序
- 2021-03-27 12:45
按照css规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？ 有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签，所以我个人不大喜欢。 后来又有了一种新的方式，使用 :after 伪类动态的嵌入一个用于清除浮动的元素，这种方法和上一种原理一样，不同的只是把这个额外的内容用 css 生成，但考虑到 ie 不支持 :after 不得不做了不少的 hack。这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证 html 比较干净，所以用得还是比较多的。 再后来又有人发现将父容器的 overflow 设为除 visible 之外的值就可以在标准兼容浏览器中闭合浮动元素，ie自然又是不支持的，所以这种方法和上一种方法一样都对 ie 做了不同处理（具体就是触发layout），不同的就是overflow 没有 :after 伪类那么麻烦了，缺点也有，overflow 可能会产生一些小冲突。 在使用 overflow 之前还有过一种使用 float 的方法，就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 ie/win 和标准兼容浏览器中都有较好的效果，但缺点也很明显——父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。使用 float 虽然在 ie 和标准兼容浏览器中都能闭合浮动元素，但原理却是不同的，ie/win 中 float 触发了 layout 因而闭合了浮动，而在标准兼容浏览器中，float 其实和上一种方法中的 overflow 原理一样，产生了一个“块级格式化范围”——这是css 规范中提到的一种现象，它往往具有某种独立性，特性之一就是会自动闭合内部的浮动元素。
- 4楼网友：十年萤火照君眠
- 2019-04-11 11:01
在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。下面一个个列出，选一个适合你的 { display: none; } { visibility: hidden; }
{ 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);
}{
position: absolute;
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
}
我要举报
如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！
点此我要举报以上问答信息
大家都在看
推荐资讯