隐藏元素的方式

已于 2023-08-07 16:14:52 修改
阅读量146 收藏
点赞数
分类专栏： HTML-CSS 文章标签： 布局 css
于 2021-10-10 21:00:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44644385/article/details/120692239
版权
  • display:none; 不占据位置，不响应绑定的监听事件
  • overflow：hidden; 仍占据位置，不响应绑定的监听事件
  • opacity:0;  transform:scale(0,0);  仍占据位置，响应绑定的监听事件
  • 特别的： position:absolute; z-index:-10;  藏起来，让用户看不到
日晞
关注
专栏目录
常见的元素隐藏方式？
liuhao9999的博客
03-23 1953
-（1）使用 display:none;隐藏元素，渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。 -（2）使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间，但是不会响应绑定的监听事件。 -（3）使用 opacity:0;将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。 -（4）通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。 -（5）通过 z-index 负值，来使其
display:none和visibility:hidden的区别
热门推荐
flower521528的博客
03-16 1万+
display：none 和visibility：hidden都可以实现让元素隐藏的效果，但原理是大不相同 1.display:none是让这个元素失去块元素的效果，其本身这个元素也是直接消失，会影响到布局问题。 2.visibility:hidden:可以让元素消失，属于css样式，它只是简单的让元素看不见，但本身的位置还在，如果对div进行hidden，那么div除了看不见，其他所有的样式都在。 ...
display:none和visible:hidden区别
allen88的专栏
05-08 1165
3、例如有三个table，将中间的一个table hidden掉，你会发现在那个被hidden的table看不见了，但是，中间会留有很大的一空白，而这个空白就是这个table没有被隐藏时所占的位置。●visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。1、visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。2、display: none----将元素的显示设为无，即在网页中不占任何的位置。
visibility:hidden；与display:none；的区别和渐进增强与优雅降级的区别
wx112728的博客
03-16 1794
1.作用不同 visibility:hidden; 将元素隐藏，但是在网页中的位置不会被取缔。 display:none; 将元素的显示设为无，在网页中不占任何位置。 2.定义不同 visibility 属性指定一个元素是否可见的 display 这个属性用于定义建立布局时元素生成的显示框类型 visibility:hidden;会触发重绘（repaint） display:none;会触发回流（reflow） 重绘不一定回流，回流一...
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别 、遮罩层效果、​ 三级菜单制作、选项卡制作——css3知识点总结
TKY666的博客
03-15 2447
一、css3新增选择器 1、兄弟选择器 相邻兄弟选择器 E + F { } 紧挨选择器E后的那个兄弟选择器F /* 相邻兄弟选择器，该代码意思是选择紧邻div后的那一个span元素，且只有第一个span会被选中。 */ div+span{ color: pink; } 通用兄弟选择器 E ~ F{ } 选择器E后的所有的兄弟选择器F /* 通用兄弟选择器，选择所有div元素后面的span元素 */ /* 一对.
无法获取隐藏元素宽度和高度的解决方案
08-31
无法获取隐藏元素宽度和高度的解决方案 在实际开发中，我们经常会遇到需要获取隐藏元素的宽高的情况，这里的隐藏元素是指display为none的元素。在默认情况下，获取隐藏元素的宽高是非常困难的，因为浏览器不会计算...
Html 元素隐藏的几种方式
09-28
除了上面提到的方法，还有一些其他方式可以在HTML中隐藏元素，例如通过设置visibility属性为hidden，该元素虽然不可见，但仍然保留其在布局中的空间： ```html <!-- CSS --> .invisible { visibility: hidden; } ...
python selenium 查找隐藏元素 自动播放视频功能
09-18
### Python Selenium 查找隐藏元素与自动播放视频功能详解 #### 一、引言 随着互联网技术的发展，网页设计越来越复杂，很多动态加载的数据使得传统的爬虫技术难以应对。特别是对于那些依赖JavaScript动态加载数据的...
隐藏元素的三种方式.md
01-02
隐藏元素的三种方式.md
css元素隐藏原理及displaynone和visibilityhidden
11-22
在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。一个一个看。
css元素隐藏原理及display:none和visibility:hidden
09-22
在CSS中，让元素隐藏指屏幕范围内肉眼不可见的方法很多，只不过有的依然保留空间，而有的却消失的不留痕迹,接下来本文将详细介绍下css元素隐藏原理，感兴趣的你可不要错过了哈
css中实现显示和隐藏（转）
weixin_34124651的博客
06-05 744
CSS中的display和visibility 在平时的开发过程中，总是会遇到一些文字在特定的场景下显示或者隐藏来达到我们想要的效果，css中display和visibility语法，他们都可以隐藏和显示html元素。看起来貌似一样，但是他们还是有一定的区别的。首先先来看一下display和visibility的属性 display属性设置元素的显示方式，对应脚本特性为...
display none和visibility hidden两者的区别_visibility hidden和display none
最新发布
2401_85011985的博客
05-15 852
给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。
csss之visibility:hidden和display:none
qq_53233068的博客
08-06 817
csss之visibility:hidden和display:none visibility:hidden和display:none再使用上有着看似相似的功效，但又不尽相同，在作用，定义以及对其他元素的影响上不同。 图一：原始状态 作用上的不同 　　visibility:hidden　　将元素隐藏，不在页面上显示 　　display:none　　　将元素属性设为无，不在网页上占据任何位置，当然也就不显示 这样一看貌似还挺像的，都可以使元素不在页面上显示，但，看下面两张图~
在页面上隐藏元素的方式有哪些，分别应用在哪些场景？display:none 与 visibility:hidden 的区别
小草莓的博客
07-21 597
点击链接时，会产生一个虚线框，对于IE还好，没什么问题，虚线框只是在背影图片大小。，子孙节点消失是由于继承了 hidden，通过修改子孙节点的属性visibility:visible 可以让子孙节点显示；IE采用的遍历方法(HTC,css表达式)有些耗系统资源，正好我们只需要隐藏FF下的虚线框就行了，IE就不管了，说一下。将文字甩到屏幕看不到的地方。，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
display:none和visibility:hidden两者的区别
weixin_43535265的博客
03-09 2184
一、相同点 display:none和visibility:hidden 都能把网页上的某元素隐藏起来 二、不同点 示例代码如下： <!DOCTYPE html> <html> <head> <style> .hidden1 { display:none; } .hidden11 { display: inherit; } .hidden12 { display: block; } .hi
css实现元素不可见的5种方法
是一座岛
06-20 1万+
概述 用纯css方式控制一个元素的隐藏，不可见。 <div class="disappear"></div> 方法1. display 注意：设置none后，不占据页面空间。 .disappear{ display:none; } 方法2. z-index 层级 注意：z-index属性需要搭配positon属性一块使用，不然设置了不起作用。 .disappear{ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值