css显示隐藏元素

最新推荐文章于 2024-05-09 10:05:40 发布
最新推荐文章于 2024-05-09 10:05:40 发布
阅读量873 收藏 3
点赞数
分类专栏： js、html、css 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45892086/article/details/124017848
版权

css显示隐藏元素

1、display:none

元素在页面不显示

但是在dom结构上能看到

触发回流和重绘

1、其余属性

block: 块元素

inline: 行内元素（默认值）

inline-block：行内块元素

inherit：继承父元素的display属性

2、opacity：0

透明度为0

只是看不到，但是还存在，点击事件可以触发

会触发页面的重绘，不会触发重排

3、visibility:hidden

元素不可见，但是会占据空间

不会触发事件

会触发页面的重绘，不会触发重排

1、其余属性

visible： 默认值，可见

collapse：用在table元素上，表现和display:none一致；用在其它元素上，表现和visibility:hidden一致

inherit： 继承父元素的visibility的属性

Shimmer-612
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS隐藏页面元素的5种方法
09-24
本文将详细介绍CSS隐藏元素的五种方法：opacity、visibility、display、position以及clip-path。 首先，`opacity`属性用于设置元素的透明度。将`opacity`设置为0可以让元素变得完全透明，从而视觉上隐藏它。然而，...
CSS选择器
hasoe的博客
07-31 1180
CSS选择器 标签选择器： 根据标签名称选择一类元素 <div></div> <span></span> id选择器： 通过id属性选择一个元素 #value 类选择器： class .value 普遍选择器： *：所有 后代选择器： >：选择当前元素的直接子元素 空格：选择当前元素的所有后代元素，包含孙代元素 兄弟选择器： +：选择当前元素之后的一个兄弟 ～：选择当前元素之后的所有兄弟元素 属性选择器： 根据元素的属性选择
《第3章 使用CSS3选择器》
TrashMaker的博客
03-26 1047
3.5伪类选择器 1.伪选择器包括伪类选择器和伪对象选择器 2.伪选择器以冒号（：）作为前缀标识符 3.冒号前是选择符，限定伪类应用范围，冒号后是伪类和伪对象名，冒号前后没有空格 4.css3的伪类选择器包括4种：动态伪类、结构伪类、否定伪类、状态伪类 一、动态伪类 1.动态伪类只有当用户与页面交互时才能体现出来 2.常见5种动态伪类： ①：link 链接没有被访问时 ②：hover 鼠标悬浮在连接上时 ③：active 鼠标左键集中激活时 ④：visited 链接被访问过后 ⑤：focus 元素称为焦点时
css定位、元素的显示与隐藏
最新发布
2302_80283616的博客
05-09 556
1. display 显示隐藏元素 但是不保留位置2. visibility 显示隐藏元素 但是保留原来的位置3. overflow 溢出显示隐藏 但是只是对于溢出的部分处理。
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
snn1410的专栏
03-08 2169
1. removeClass() - 移除CSS类 $("#target").removeClass("oldClass"); //#target 指的是需要移除CSS类的元素的ID //oldClass 指的是CSS类的名称 2.addClass() - 添加CSS类 $("#target").addClass("newClass"); //#target 指的是需要添加样式的元
判断数组中是否存在某个元素
qq_43796489的博客
09-07 833
1.some()方法 const arr = ['lx', 'css', 3] const type = arr.some(item => item==='lx') console.log(type) // true 2.includes()方法 (如果计算出的索引小于 0，则整个数组都会被搜索。) const arr = ['lx', 'css', 'lx'] console.log(arr.includes('lx', -100)) // true
css 利用 :not(:empty) 找出有子元素
chelen_jak的专栏
08-30 6644
参考：CSS 为没有内容的元素设置样式 :not(:empty) 我们有时会想将有子元素和无子元素的不同样式显示，所以就有了这篇资料 Html <div class='box'></div> <div class='box'>纯文本</div> <div class='box'><button>内置button&lt...
输入密码时显示隐藏CSS3特效
04-06
本话题聚焦于一个常见的交互元素——“输入密码时显示隐藏CSS3特效”。这个特效是利用JavaScript（js）和层叠样式表（CSS3）来实现的一种功能，它允许用户在输入密码时切换显示或隐藏状态，提升用户在输入敏感信息时...
CSS“隐藏”元素的多种方法的对比
09-24
在CSS中隐藏元素是网页设计和开发中常见的需求，用于实现动态效果、隐藏不必要内容或者在特定条件下显示隐藏信息。本篇文章将对比几种常见的CSS隐藏元素的方法，探讨它们之间的区别、优缺点以及对页面布局和事件响应...
纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存
11-17
在这个特定的主题中，“纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存”是指通过CSS实现的一种交互效果：当鼠标悬停在一个div上时，另一个关联的div会显示出来，同时其他无关的div保持隐藏状态。这种效果在创建导航...
css判断某元素的子元素个数并分别设置样式的方法
09-24
主要介绍了css判断某元素的子元素个数并分别设置样式的方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JQuery显示隐藏页面元素的方法总结
10-24
主要介绍了JQuery显示隐藏页面元素的方法总结,本文分别讲解了show()、hide()、toggle()、slideDown()、css()5种控制显示隐藏某个DIV或P标签等页面元素的方法,需要的朋友可以参考下
CSS------元素隐藏显示
courageFei的博客
07-25 171
常见的三种元素显示隐藏 - display（英文显示的意思） 设置元素的可见block（也有转为块元素的意思）与不可见none（隐藏对象） display元素设置的隐藏就相当于这个元素没有存在过一样在页面中彻底消失，不会有它占有的位置。 -visibility(能见度,可见性,可见度,能见) 它的属性值由visible：对象可见，默认状态就是可见。 另一个属性hidden；不可见，元素虽然...
如何判断一个元素是否在可视区域中？
TongJ_的博客
02-19 1929
一、用途 可视区域即我们浏览网页的设备肉眼可见的区域，如下图 在日常开发中，我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值（例如 100 px），从而实现一些常用的功能，例如： 图片的懒加载列表的无限滚动计算广告元素的曝光情况可点击链接的预加载 二、实现方式 判断一个元素是否在可视区域，我们常用的有三种办法： offsetTop、scrollTop getBoundingClientRect Intersection Observer 方法一 offsetTop、scrollT
如何设置css判断class元素数据为空的时候显示‘--’
熟悉 vue2 vue3 jquery js echarts
01-13 774
empty是一个css的伪类选择器，用于选择页面中为空的元素,作用于该元素，使用 empty 配合 bofore 或者 after 可以打到空元素占位的效果，当后端数据返回接口里面为空 要进行处理成‘–’empty_ph css样式。这样是最简单的办法了。
【CSS】属性选择器
德仔
06-16 312
1. [attr] 匹配带有一个名为attr的属性的元素——方括号里的值。 2.[attr=value] 匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串。 3.[attr~=value] 匹配带有一个名为attr的属性的元素，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。注意，在一列中的好几个值，是用空格隔开的。 **4.[attr |=value] 匹配带有一个名为attr的属性的元素，其值可正为value，或者开
css 元素显示隐藏display
02-20
CSS中的display属性用于控制元素的显示和隐藏。它有多个取值，其中常用的有以下几种： 1. display: none; 这个值会完全隐藏元素，元素不会在页面上占据任何空间。相当于元素被从文档流中移除了。 2. display: block; 这个值会将元素显示为块级元素，即元素会独占一行，并且可以设置宽度、高度、边距等属性。 3. display: inline; 这个值会将元素显示为内联元素，即元素不会独占一行，只会占据自身内容所需的空间。 4. display: inline-block; 这个值会将元素显示为内联块级元素，即元素不会独占一行，但是可以设置宽度、高度、边距等属性。 5. display: flex; 这个值会将元素显示为弹性盒子容器，可以使用弹性盒子布局来排列子元素。 6. display: grid; 这个值会将元素显示为网格容器，可以使用网格布局来排列子元素。 除了以上常用的取值外，display属性还有其他一些取值，如table、table-cell、table-row等，用于控制元素的表格布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值