隐藏元素 - display:none或visibility:hidden的区别

最新推荐文章于 2024-05-03 12:12:21 发布
最新推荐文章于 2024-05-03 12:12:21 发布
阅读量186 收藏 2
点赞数 2
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64878682/article/details/132819517
版权

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

（1）visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。代码解释如下：

菜鸟教程在线编辑器 (runoob.com)

（2）display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。代码解释如下：

菜鸟教程在线编辑器 (runoob.com)

前行人
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
visibility:hidden；与display:none；的区别和渐进增强与优雅降级的区别
wx112728的博客
03-16 1737
1.作用不同 visibility:hidden; 将元素隐藏，但是在网页中的位置不会被取缔。 display:none; 将元素的显示设为无，在网页中不占任何位置。 2.定义不同 visibility 属性指定一个元素是否可见的 display 这个属性用于定义建立布局时元素生成的显示框类型 visibility:hidden;会触发重绘（repaint） display:none;会触发回流（reflow） 重绘不一定回流，回流一...
css元素隐藏原理及display:none和visibility:hidden
09-22
在CSS中，让元素隐藏指屏幕范围内肉眼不可见的方法很多，只不过有的依然保留空间，而有的却消失的不留痕迹,接下来本文将详细介绍下css元素隐藏原理，感兴趣的你可不要错过了哈
关于opacity:0、visibility:hidden、display:none三个属性的比较以及拓展
问白的博客
03-04 8295
今天上午看某头条的时候有个刚入门的前端小伙伴提问道opacity:0、visibility:hidden、display:none。这三个属性的区别，这三个属性在我们日常开发中也算是用到频率也是蛮多的，所以干脆就就把这三个属性放在一起，配合实例做一个比较。首先这三个属性依次设置为0/hidden/none都可以使得用户看不见页面上的元素，不过他们之间还是有区别的，不然若是一样的话，也就没必要用三个...
visibility:hidden和display:none的区别
热门推荐
SoLoJia的博客
03-15 2万+
visibility:hidden和display:none有以下几种不同，分别是1、作用不同；2、使用后HTML元素有所不同；3、定义不同。 1、作用不同: visibility:hidden将元素隐藏，但是在网页中该占的位置还是占着。 display:none将元素的显示设为无，即在网页中不占任何的位置。 2、使用后HTML元素有所不同: visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、
CSS元素的显示与可见性（详解Display和Visibility的用法）
最新发布
百赢出品，必属精品
05-03 2704
1.DisplayDisplay主要用于控制元素的布局方式，包括块级、行内、弹性布局和网格布局等。Visibility主要用于控制元素的可见性，即元素是否在页面中可见，但不影响布局。display属性display属性用于定义元素应该生成的框的类型。常见的display属性值包括：none: 元素不会被渲染在页面上，且不占据空间。block: 元素被渲染为块级元素，占据一整行。inline: 元素被渲染为内联元素，不会独占一行，与其他内联元素在一行内显示。
visibility: hidden；与display:none；区别
qq_43812504的博客
12-02 7042
visibility:hidden;和display:none;的区别： visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域， display:none属性会使这个对象彻底消失不显示，也不再占用位置。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp
CSS基础学习--13 Display(显示) 与 Visibility（可见性）
yyxhzdm的博客
06-13 1802
display属性设置一个元素应如何显示visibility属性指定一个元素应可见还是隐藏。
display:none和visibility:hidden的差别比较与演示代码
09-25
display:none和visibility:hidden的差别:visibility:hidden隐藏，但在浏览时保留位置；而CSS display:none视为不存在，且不加载,感兴趣的朋友可以研究下
实例详解display:none与visible:hidden的区别
08-30
`display:none` 和 `visibility:hidden` 是两个经常用来隐藏网页元素的关键属性，但它们在实现效果和应用场景上有所不同。 `display:none` 的主要特点是它会完全移除元素在页面上的存在感。不仅元素的内容不可见，...
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别 、遮罩层效果、​ 三级菜单制作、选项卡制作——css3知识点总结
TKY666的博客
03-15 2336
一、css3新增选择器 1、兄弟选择器 相邻兄弟选择器 E + F { } 紧挨选择器E后的那个兄弟选择器F /* 相邻兄弟选择器，该代码意思是选择紧邻div后的那一个span元素，且只有第一个span会被选中。 */ div+span{ color: pink; } 通用兄弟选择器 E ~ F{ } 选择器E后的所有的兄弟选择器F /* 通用兄弟选择器，选择所有div元素后面的span元素 */ /* 一对.
CSS中，display：none、visibility：hidden 和 opacity：0 之间的区别
LoveHaixin的博客
09-19 659
display:none 隐藏之后不占位置，该元素和它所有的后代元素都会被隐藏，也无法使用屏幕阅读器等辅助设备访问；visibility:hidden 会被子元素继承，通过设置子元素visibility:visible来显示子元素。opacity:0 会被子元素继承，但是不能设置子元素opacity:0来重新显示。display:none 不会被子元素继承，父元素都不存在了，子元素也不会显示出。display:none 的元素都已经不再页面存在了，因此无法触发它绑定的事件。5、是否会产生生回流和重绘。
在页面上隐藏元素的方式有哪些，分别应用在哪些场景？display:none 与 visibility:hidden 的区别
小草莓的博客
07-21 456
点击链接时，会产生一个虚线框，对于IE还好，没什么问题，虚线框只是在背影图片大小。，子孙节点消失是由于继承了 hidden，通过修改子孙节点的属性visibility:visible 可以让子孙节点显示；IE采用的遍历方法(HTC,css表达式)有些耗系统资源，正好我们只需要隐藏FF下的虚线框就行了，IE就不管了，说一下。将文字甩到屏幕看不到的地方。，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
display: none和visibility: hidden的区别解释
qq_37734787的博客
11-02 882
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性 1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质
csss之visibility:hidden和display:none
qq_53233068的博客
08-06 766
csss之visibility:hidden和display:none visibility:hidden和display:none再使用上有着看似相似的功效，但又不尽相同，在作用，定义以及对其他元素的影响上不同。 图一：原始状态 作用上的不同 　　visibility:hidden　　将元素隐藏，不在页面上显示 　　display:none　　　将元素属性设为无，不在网页上占据任何位置，当然也就不显示 这样一看貌似还挺像的，都可以使元素不在页面上显示，但，看下面两张图~
三种隐藏方式：display:none,visibility:hidden,opacity:0的区别
m0_52943868的博客
04-01 3777
1、display:none隐藏 display:black 显示 2、visibility: hidden 隐藏 visibility: visible 显示 3、 opacity: 0 隐藏 opacity：1 显示 其三者的区别： 1、时间绑定 display 的元素已经不再页面 所及无法触发上面的绑定时间 visibility: hidden ：元素上绑定的时间也无法触发 opacity：透明度为0 其实际还在 所及可以触发上边的绑定时间 2、对于空间的占用 display:n..
opacity: 0、visibility: hidden、display: none 有啥区别
zhoukaibai的博客
05-18 1400
这三种方式的使用场景分别是：● opacity: 0：隐藏元素，但是需要占据原来的空间；需要注意的是，opacity 属性不仅影响元素的可见性，还影响其交互行为（例如点击事件的响应）● visibility: hidden：隐藏元素，但是需要占据原来的空间，并且保持元素布局不变；● display: none：隐藏元素，并且不需要占据原来的空间，也不影响其他元素的布局。
CSS属性：元素隐藏
沉梦昂志
06-25 265
overflow 属性 处理超出范围的文本内容 常用属性值 visible 默认值，溢出内容不会被修剪，会呈现在元素框之外 hidden 不显示溢出的内容 scroll 滚动条来显示元素内溢出的内容，即使没有溢出也显示滚动条 auto 自动地处理溢出，如果溢出则显示滚动条，如果没溢出，则正常显示 代码示例 <style type="text/css"> div{ width: 100px; height: 100px; backgro
display:none和visibility:hidden的区别
flower521528的博客
03-16 1万+
display：none 和visibility：hidden都可以实现让元素隐藏的效果，但原理是大不相同 1.display:none是让这个元素失去块元素的效果，其本身这个元素也是直接消失，会影响到布局问题。 2.visibility:hidden:可以让元素消失，属于css样式，它只是简单的让元素看不见，但本身的位置还在，如果对div进行hidden，那么div除了看不见，其他所有的样式都在。 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前行人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值