CSS显示隐藏的三种方法

最新推荐文章于 2024-04-23 22:27:30 发布
最新推荐文章于 2024-04-23 22:27:30 发布
阅读量668 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74577714/article/details/133839837
版权

在我们网页开发时，我们通常会使用到显示或隐藏某一个元素，那我们如何实现显示与隐藏呢，让我为大家介绍一下CSS中显示隐藏的方法吧！
基础的样式布局
在这里插入图片描述

显示效果隐藏效果
display:blockdisplay:none
visibility:visiblevisibility:hidden
opacity:1opacity:0

一、display的block与none属性可以实现显示隐藏

当我们使用display:none时，我们的元素不占原来位置
在这里插入图片描述
display:block;除了转换为块元素之外，同时还有显示元素的意思

二、visibility的visited与hidden

visibility属性用于指定一个元素可见还是隐藏
visibility隐藏元素之后，继续占有原来的位置
在这里插入图片描述
visibility:visible;元素可视

三、opacity(透明度)

我们使用opacity也可以达到显示与隐藏的效果
直接给opacity设置为0，我们元素的透明度为0时
在这里插入图片描述
当我们设置为1时就是元素不透明，默认为1
opacity:1

本人文笔有限，感谢大家的阅读，如有不对的地方可以向我提出，感谢大家！

远近高低各不同
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯css3显示隐藏一个div特效的具体实现
09-25
显示隐藏一个div特效的方法有很多，下为大家介绍下使用纯css3是如何实现的，感兴趣的朋友可以参考下
关于元素的显示与隐藏
weixin_45976564的博客
09-17 1146
元素的显示与隐藏 类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现 本质：让一个元素在页面中隐藏或者显示出来 一.display属性（显示隐藏元素，但是不保留位置） display：none ；隐藏对象 display：block；除了转换为块级元素之外，同时还有显示元素的意思 display隐藏元素后，不再占有原来的位置。 后面应用及其广泛，搭配js可以做很多的网页特效 二.visibility可见性（显示隐藏元素，但是保留原来位置） visibility：vis
CSS实现元素显示与隐藏的方式整理
有事儿私信。
11-02 2469
在CSS中，有多种方法可以用来控制元素的显示和隐藏。displayvisibilityopacity和。理解这些属性的区别、使用场景以及如何使用它们是重要的CSS技能。
css实现二级菜单
first_hands的博客
03-03 2208
由上面的实例可以看出，使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级菜单的li标签时，显示二级菜单的ul标签。display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。先隐藏二级的菜单，当鼠标移动到一级菜单的li标签时，在显示二级菜单的ul标签。list-style-type:none - 删除圆点。float：left-向左浮动，保证一级菜单水平显示。display:none-隐藏二级的菜单。
分别用html/css、javascript、jQuery实现下拉菜单的显示和隐藏
HuLuWa1997的博客
11-21 4253
一、html/css实现下拉菜单的显示和隐藏 简单来说就是通过对css样式的控制来实现下拉菜单的显示和隐藏 具体代码示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...
CSS控制DIV层显示和隐藏的实现方法
12-11
CSS中的display和visibility属性 css中display和visibility可以隐藏和显示html元素包括DIV层。看起来两者非常类似，很多人会搞混。下面分别介绍两者的属性： display:none|block; display:none; 隐藏该html元素，确切的说，是在浏览器中消除该元素，不占屏幕的空间。若其下有其他元素，就会上移到该空间区域（好像桌子上有100块钱，现在我把它放在抽屉里藏起来，桌子上放100钱的地方可以放在其他任何东西）。 dispaly:block; 显示已经隐藏的html元素，如果别的元素占有了该空间时，他将下移，空间重新别原来的元素占有。（把
【CSS】纯CSS点击显示隐藏
学习永不晚
09-30 9333
纯CSS点击显示隐藏，不需要加载任何文件，参考案例： <style type="text/css"> #show{display:none;} #show:target{background:orange; display:block;} #hide:target{display:none;} </style> <a href="#show">点击显示&l...
css元素的显示与隐藏 display显示隐藏 +visibility显示隐藏 +overflow溢出显示隐藏
Echo_bx的博客
04-02 807
css元素的显示与隐藏display显示隐藏元素visibility显示隐藏元素overflow溢出显示隐藏 display显示隐藏元素 display 设置或检索对象是否及如何显示。 display: none 隐藏对象 display：block 除了转换为块级元素之外，同时还有显示元素的意思。 特点： display 隐藏元素后，不再占有原来的位置。 visibility显示隐藏元素 visibility 属性用于指定一个元素应可见还是隐藏。 visibility：visible ; 　元素可视
用CSS实现"点击"显示隐藏效果
weixin_34029680的博客
05-08 8768
CSS实现点击下拉,看清楚题目哦，是点击下拉。不是hover下拉。 <style lang=""> ul>li>ul{ display: none; } input[type=checkbox]{ display: none; } ul li input[type=checkbox]:checked+ul{...
css三种显示隐藏方法
qq_68971977的博客
07-17 351
显示与隐藏
输入密码时显示隐藏CSS3特效
04-06
输入密码时显示隐藏CSS3特效是一款原生js+css3制作的input文本输入框密码显示或隐藏效果密码输入框ui特效。
jQuery的显示和隐藏方法与css隐藏的样式对比
10-26
display:none和visible:hidden都能把网页上某个元素隐藏起来，而jQuery的显示和隐藏又有哪些方法，在本文将为大家详细介绍下，感兴趣的朋友不要错过
CSS怎么隐藏滚动条(三种方法)
11-21
对于这个bug一般有3种解决方案，方法1:代码：程序代码 复制代码代码如下:html { overflow-y: scroll; } 原理：强制显示ie的垂直滚动条，而忽略水平滚动条优点：完全解决了这个问题, 允许你保持完整的XHTML doctype....
【CSS】grid 布局一行自动填充，每行最大限定px
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-23 320
【代码】【CSS】grid 布局一行自动填充，每行最大限定px。
CSS基础——1.CSS样式
weixin_66370632的博客
04-23 690
CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等。css的主要作用是定义网页的样式 CSS样式 1. 行内样式 行内样式：直接定义在 HTML 标签的 style 属性中
SCSS的基本使用(一)
大圣归来圣骑士清欢的博客
04-22 511
SCSS的基本使用、语法
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1070
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
2分钟自己写小游戏：使用js和css编写石头剪刀布小游戏、扫雷小游戏、五子棋小游戏。新手老手毕业论文都能用。
m0_68335484的博客
04-23 1356
2分钟自己写小游戏：使用js和css，快捷编写剪刀石头布游戏源代码、扫雷源代码、五子棋。新手老手毕业论文都能用。使用的都是简单的js和css代码，实现了这三款小游戏，复制就能用。一看就能懂。这里分享一下。下次继续。
CSS文本样式
最新发布
qq_41807399的博客
04-23 466
CSS中使用text-align属性来定义文本的水平的对其方式。left：左对齐right：右对齐center：居中对齐justify：两端对齐将块状元水平居中需要使用margin属性，将左右两边都设置成自动时，块状元素会自动居中。CSS使用vertical-align属性定义文本的垂直对齐问题auto属性值根据layout-flow属性值定义对齐对象的内容baseline：表示对象内容与基线对齐sub表示垂直对齐文本的下标super表示垂直对齐文本的上标。
css 显示隐藏滚动条
07-28
回答: 要在CSS中显示或隐藏滚动条，可以使用不同的方法。其中一种方法是使用Firefox浏览器的特定样式属性。通过在元素的CSS样式中添加"overflow: -moz-scrollbars-none;"，可以隐藏Firefox浏览器中的滚动条。\[1\]另一种方法是使用WebKit浏览器（如Chrome和Safari）的特定样式属性。通过在元素的CSS样式中添加"::-webkit-scrollbar { width: 0 !important; }"，可以隐藏WebKit浏览器中的滚动条。\[2\]如果想要在HTML元素中隐藏滚动条，可以使用CSS的overflow属性。通过将overflow属性设置为"hidden"，可以隐藏滚动条。\[3\] #### 引用[.reference_title] - *1* *3* [实现CSS隐藏滚动条并可以滚动内容](https://blog.csdn.net/dengla6847/article/details/102411484)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [【CSS】css如何让滚动条不显示（CSS隐藏滚动条）](https://blog.csdn.net/liuzhenhe1988/article/details/125489940)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值