设置元素隐藏的方法

已于 2023-03-09 19:13:24 修改
阅读量64 收藏
点赞数 1
分类专栏： css初学---遇到的问题 文章标签： css html5 Powered by 金山文档
于 2023-03-09 18:36:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuyuyuyuyuyyuuyu/article/details/129428564
版权

方案一：display（盒子的状态）

给绿色的盒子加display:none

  1. 隐藏效果：实现

  1. 占据空间：丢失

  1. 相当于完全删除没写

方案二：visibility（可视性）

给绿色的盒子加visibility:hidden

  1. 隐藏效果：实现

  1. 占据空间：没有丢失

  1. 只是看不见了，节点还在，没有被删除

方案三：opacity（透明度）

给绿色的盒子加opacity：0

  1. 隐藏效果：实现

  1. 占据空间：没有丢失

  1. 变成透明了

方案四：z-index(改变层级）

给红色的盒子加：

posistion:除了static剩下的都可以

z-index:-1

  1. 隐藏效果：实现

  1. 占据空间：可能丢失，posistion值决定

  1. 被绿色盒子遮挡了

方案五：transform（转换）

给红色的盒子加：

posistion:除了static剩下的都可以

z-index:-1

  1. 隐藏效果：实现

  1. 占据空间：没有丢失

  1. 缩小到看不到了

越来越好的月
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css中实现元素隐藏的几种方法
simple_Xsg的博客
04-09 2万+
一、display:none; display翻译成中文是显示、展览的意思；将display的属性改为none可以实现元素的隐藏，元素和盒子模型也不生成，被隐藏的元素不占位置，看不见摸不着，它会导致浏览器的重排和重绘。 二、visibility:hidden; visibility翻译成中文是能见、可见性的意思；hidden翻译成中文的是隐藏、不易察觉的意思。将visibility的属性改成hidden可以实现元素的隐藏，和display:none的区别是它占位置，看不见但是摸得着，所以它只会导致浏览
js判断元素是否隐藏的方法
12-01
如果元素的`display`是`none`或者`visibility`是`hidden`，`:hidden`选择器将返回`true`，表示元素隐藏。相反，`:visible`选择器将返回`true`表示元素可见： ```javascript var $element = $('#div'); if ($element...
隐藏元素的几种方法
热门推荐
Wennsai的博客
10-06 1万+
隐藏元素的几种方法 1、overflow:hidden; 防止溢出，也是一种隐藏，只不过是把超出范围的元素隐藏，这种一般用于文字过多或者图片特效以及自适应中div没法设置高度时使用 2.display:none 设置元素的display为none是最常用的隐藏元素的方法。 .hide { display:none; } 这就是完全的隐藏了，直接消失，任何对该元素直接的用户交互操作都不可能生效，被隐藏的元素完全不会占用空间，仿佛元素完全不存在一样。 3、opacity:0 opacity属性表示
css实现元素不可见的5种方法
是一座岛
06-20 1万+
概述 用纯css方式控制一个元素的隐藏，不可见。 <div class="disappear"></div> 方法1. display 注意：设置none后，不占据页面空间。 .disappear{ display:none; } 方法2. z-index 层级 注意：z-index属性需要搭配positon属性一块使用，不然设置了不起作用。 .disappear{ ...
元素的显示与隐藏
qq_42760049的博客
04-22 572
设置元素显示与隐藏的常用属性 display 显示方式 none元素隐藏，且隐藏之后，不保留其位置 block元素作为块级元素显示 inline元素作为行级元素显示 inline-block元素作为行内块元素显示 不同元素的display默认值不一样，一般使用none和block进行元素显示与隐藏的切换 visibility 可见性 hidden元素不可见，不是隐藏，所以...
实现元素隐藏
weixin_43756410的博客
11-17 423
元素隐藏的7种方法 1.设置透明度 opacity:0 设置透明度为0，即全透明 2.让元素缩小 transfrom:scale(0) 将元素缩小至0. 3.隐藏溢出元素 overflow:hidden 溢出容器的部分将会隐藏 4.隐藏元素 visibility:hidden 隐藏元素，空间会保留，子元素不受影响 5.使用定位 position: 使用定位让元素再屏幕之外 6.display display:none 不占空间，盒模型不生成，js可以访问。 7.` clip-path:polyg
CSS隐藏页面元素的5种方法
09-24
首先，`opacity`属性用于设置元素的透明度。将`opacity`设置为0可以让元素变得完全透明，从而视觉上隐藏它。然而，这种方法并不影响元素的布局，元素仍然占用其原有的空间，并且可以响应用户交互。需要注意的是，...
CSS“隐藏”元素的多种方法的对比
09-24
关于元素隐藏后的事件响应： - `display:none`隐藏的元素不会响应任何事件。 - `visibility:hidden`和`opacity:0`的元素仍然可以响应事件，即使用户看不见它们。 - 尺寸设为0的元素，如果其内容被隐藏（如`overflow:...
JQuery显示隐藏页面元素的方法总结
12-12
在jquery中显示隐藏div方法方法有很多种，如比较简单的函数show...如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。 代码如下: <html> <head> <script type=”text/javascript”
JavaScript实现简单的元素显示和隐藏
sleepwalker_1992的专栏
06-27 5066
隐藏：display:none; 显示：display:block; 方法一：设置display样式 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &
实现元素隐藏的方式有哪几种？
weixin_45650243的博客
12-03 1385
实现元素隐藏的方式有哪几种？ 1.opacity:0 设置透明度 2.visibility:hidden 将元素隐藏 3.display:none 将元素从网页移除 4.position:-2000px 将元素移出视图区
隐藏元素的八种方法
小红帽的博客
06-02 4326
visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在opacity: 0; CSS3属性，设置0可以使一个元素完全透明position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外display: none; 元素会变得不可见，并且不会再占用文档的空间。transform: scale(0); 将一个元素设置为缩放
窗口所在位置，元素的宽高
wybxzht的博客
09-07 234
Window视图： 浏览器相对于屏幕的位置 screeLeft screeTop screenX screeY 浏览器窗口大小 outerWidth outerHeight 页面视图的大小 innerWidth innerHeight Document文档视图 （低版本IE的innerWidth、innerHeight的代替方案） document.documentElement.clientWidth 浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏、滚动条） document.documentE
2024年公共文化与社会服务国际会议（ICPCSS 2024）
wx19980549140的博客
07-12 1030
2024年公共文化与社会服务国际会议是一个集学术性、实践性和国际性于一体的盛会。我们期待与您共同探讨公共文化与社会服务的未来发展方向，为推动该领域的持续创新与发展贡献智慧和力量。随着社会的不断发展，公共文化与社会服务的重要性日益凸显。为了促进该领域的学术交流与合作，2024年公共文化与社会服务国际会议应运而生。本次会议旨在汇聚全球专家学者，共同探讨公共文化与社会服务的最新研究成果、发展趋势及面临的挑战，以推动该领域的持续创新与发展。
CSS实现table表格：隔行换色的效果
pan_junbiao的博客
07-12 343
表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号表示。定义表格光使用是不够的，还需要定义表格中的行、列、标题等内容。在CSS中，可以使用 nth-child 选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素，nth-child(odd) 可以匹配奇数行，nth-child(even) 可以匹配偶数行。使用CSS样式实现 table 表格隔行换色的效果。
CSS实现从上往下过渡效果
m0_56164131的博客
07-11 251
要实现一个从上往下显示的过渡效果，可以使用CSS的@keyframes规则来创建一个动画，使得元素在垂直方向上逐渐改变其位置。
css画半圆&&画圆弧
M1512415的博客
07-12 218
【代码】css画半圆&&画圆弧。
CSS图像不透明度的艺术：探索透明度控制的无限可能
最新发布
Lesleyhnj的博客
07-15 112
在网页设计中，图像的不透明度（Opacity）和透明度（Transparency）是两个关键的概念，它们不仅影响着页面的视觉效果，还能增强用户体验，创造丰富的交互效果。通过调整图像的不透明度，设计师可以实现元素间的层次感，营造柔和或梦幻的氛围，甚至在动画和过渡效果中发挥重要作用。本文将从不同角度深入探讨CSS中控制图像不透明度的技术，帮助你掌握这一技能，提升网站的美学品质。定义与作用： 属性允许我们改变HTML元素的不透明度，取值范围是0到1之间，其中0表示完全透明，1表示完全不透明。这个属性应用于整个元素
CSS变换
m0_63165331的博客
07-14 535
本文主要讲述CSS中的变换相关内容。
css隐藏元素方法有？
05-25
常用的 CSS 隐藏元素方法有以下几种： 1. display:none：完全隐藏元素，元素不占据空间。 2. visibility:hidden：元素被隐藏，但仍占据空间。 3. opacity:0：将元素透明度设置为 0，元素不会被隐藏，但无法看到。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值