用CSS实现元素的显示与隐藏（简单介绍display，visibility和overflow）

最新推荐文章于 2023-10-15 11:25:35 发布
VIP文章 最新推荐文章于 2023-10-15 11:25:35 发布
阅读量2.7k 收藏 7
点赞数 7
分类专栏： 个人笔记 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ovocc/article/details/120819872
版权

用CSS实现元素的显示与隐藏

前言

  将元素的显示和隐藏，他们的主要目的是让一个元素在页面中消失，但是不并非是将该元素删除，虽然在界面中是看不见它的，但实际上它还存在与文档源代码里面。类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！俗称消失了，但也没完全消失。

  在这里要介绍的是如何通过display

最低0.47元/天 解锁文章
代森森
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
专栏目录
纯css3显示隐藏一个div特效的具体实现
09-25
显示隐藏一个div特效的方法有很多，下为大家介绍下使用纯css3是如何实现的，感兴趣的朋友可以参考下
谈谈CSS隐藏元素(display,visibility)的区别
12-03
复制代码代码如下:{ display: none; /* 不占据空间，无法点击 */ } { visibility: hidden; /* 占据空间，无法点击 */ } { position: absolute; top: -999em; /* 不占据空间，无法点击 */ } { position: relative; top: -999em; /* 占据空间，无法点击 */ } { position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ } { height: 0; overflow: hidden; /* 不占据空间，无法点击 */
【CSS】CSS元素隐藏：display:none | visibility:hidden | opacity:0 的区别
ColdCoder的博客
04-07 1272
我们有几种方式可以隐藏一个元素： CSS position绝对定位，使元素位于可视范围外 type="hidden"的表单元素。 宽度和高度都显式设置为0。 CSS display的值是none。 CSS visibility的值是hidden CSS opacity的值是0 下面重点是说一下常用即面试常被问到的三种隐藏元素方式：display: none | visibility: hidden opacity: 0 基本功能： display: none: 元素自身及后代元素都会隐藏，隐藏后的元素无
浅谈CSS的visibility: hidden | collapse 与display: none
筱葭的博客
03-02 3840
对于CSS里的visibility属性，通常其值被设置成visible或hidden。 visible:hidden相当于display:none，能把元素隐藏起来，但两者的区别在于： ①　display:none 元素不再占用空间。 ②　visible:hidden使元素在网页上不可见，但仍占用空间。 然而，visibility 还可能取值为collapse 。当设置元素
css之清除浮动
Hu_LSS的博客
03-03 128
css之清除浮动 清除浮动： 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。 clear语法：clear : none | left | right | both取值：none : 默认值。允许两边都可以有浮动对象left : 不允许左边有浮动
CSS中visibility 属性
热门推荐
weixin_49272677的博客
02-13 1万+
CSS中visibility 属性 一、visibility:visible;详情 　　visible：visible属性值定义的元素是可见显示的，是默认的属性值。 二、visibility:hidden;详情 　　hidden：hidden属性值定义的元素是不可见不显示的，但是元素还会占据原有的空间。 三、visibility:collapse;详情 　　collapse：collapse属性值定义不同的元素有不同的效果。 　　用在表格元素时：会删除一行或一列，不会影响表格的布局； 　　用在非表格元素上时
CSS——display:none与visibility:hidden的区别
chengzhangdewo的博客
10-18 986
隐藏元素的方法有很多，比如：让元素变透明：opcity:0,设置display:none，或设置visibility:hidden。 1、display:none 给元素设置了display：none后，那么该元素及其后代都会被隐藏，在页面中看不见点不到，但是它还存在于页面中，只是它不占据空间，对后面的元素布局没有任何影响。 2、visibility:hidden visibility:hidden与display：none有同样的作用，不同的是设置了它之后，元素会占据原本的空间，会影响后面元素的布局
CSS显示隐藏的三种方法
最新发布
m0_74577714的博客
10-15 712
在我们网页开发时，我们通常会使用到显示或隐藏某一个元素，那我们如何实现显示与隐藏呢，让我为大家介绍一下CSS中显示隐藏的方法吧！
CSS隐藏属性display:none；visibility:hidden；overflow:hidden
Jorpeng的博客
10-28 4093
前端CSS元素隐藏的知识（display:none；visibility:hidden；overflow:hidden；opacity: 0）
论html标签中的style="visibility:visible"
赫双炎
10-16 4632
style="visibility:visible"之前改过一个bug，一个开源的【上传文件】按钮，需求是当上传的文件大于5条的时候，该按钮要隐藏，否则要显示。 我很快就写出来了，并且达到了按条件显示和隐藏的效果，可以后来同事发现隐藏再显示出来的按钮，功能不好用了。 后来找到原因，是因为我用了style=’display:none’; 也就是说，如果仅仅是为了隐藏该标签，而不想使标签失效（相关
CSS隐藏元素 display visibility opacity的区别.docx
07-24
CSS隐藏元素 display visibility opacity的区别 display:none和visibility:hidden的区别 对比总结： height:0和overflow:hidden的组合
CSS教程:CSS让网页文字自动隐藏
11-30
文字隐藏应用广泛，但常用的方法没有什么亲和力。 文字隐藏应用广泛，但常用的方法没有什么亲和力。 常用文字隐藏方法的缺陷： 1、display:none 这种方法搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略； 屏幕...
HTML&CSS; 13.zip
10-03
html&css;学习13的源码 包含display和visibility，overflow和文档流三个部分（博客地址：https://blog.csdn.net/weixin_44679038/article/details/101995116）
学习笔记18:CSS清除浮动
01-08
缺点：无法显示溢出的部分 3、父级添加after伪元素 after是额外标签法的升级版，也是给父元素添加标签 .clear_fix: after{ content: ; display: block; height: 0; clear: both; visibility: hidden; }
display: none和visibility: hidden的区别解释
qq_37734787的博客
11-02 848
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性 1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质
CSS基础知识（二十）：display：none和visibility：hidden的区别
前端
11-12 937
display：none和visibility：hidden的区别 （1）display: none隐藏后的元素不占据任何空间，无法使用屏幕阅读器等辅助设备访问，而visibility: hidden隐藏后的元素空间依旧保留 （2） visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。display: none非继承性，重新设置子元素也不会显示 （3）visibility
CSS基础学习--13 Display(显示) 与 Visibility（可见性）
yyxhzdm的博客
06-13 1724
display属性设置一个元素应如何显示visibility属性指定一个元素应可见还是隐藏。
CSS之元素隐藏属性对比：overflow: hidden; visibility: hidden; display: none;
iuukai
02-14 989
相同：三者都能使元素隐藏。 区别： overflow: hidden;溢出隐藏。这个说是隐藏，倒不如说是裁剪，把超出显示的区域裁剪掉，与clip类似。 visibility: hidden;隐藏可见性。这个是把元素隐藏掉，相当于100%透明，不可见，但是还是占位置，占空间。（相当于哈利波特披上隐形斗篷，他还能碰到物体） display: none;不显示。这个隐藏看不见也不占空间。 ...
visibility，display，opacity的区别？
想好了再写！
08-11 3308
相同点： visibility和display都能实现元素的显示和隐藏 display: none; 隐藏元素 display: block; 显示元素 display: inline; 元素转换为行内元素 display: inline-block; 元素转换为行内块元素 visibility:hidden; 隐藏元素 visibility: visible;显示元素 opacity: 0是视觉上消失了，透明度为0，在文档流中站位，浏览器会解析 区别： 1.性能比较 使用visibility:hid
css display显示隐藏
08-27
CSS中的display属性可以控制元素的显示和隐藏。常用的取值有以下几种： 1. display: none;：将元素完全隐藏，不留下任何空间。 2. display: block;：将元素显示为块级元素，独占一行。 3. display: inline;：将元素显示为内联元素，不独占一行。 4. display: inline-block;：将元素显示为内联块级元素，不独占一行。 5. display: flex;：将元素显示为弹性容器，可以使用弹性布局。 6. display: grid;：将元素显示为网格容器，可以使用网格布局。 通过设置display属性，可以实现根据需要来显示或隐藏元素。例如，设置display: none;可以在需要时将元素隐藏起来，并且不占用页面空间。而将display: block;或display: inline;设置为元素，则可以使元素显示出来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值