display:none和visibility:hidden的区别？

最新推荐文章于 2024-06-05 00:48:32 发布
最新推荐文章于 2024-06-05 00:48:32 发布
阅读量109 收藏
点赞数
文章标签： css3 css html5 html web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50723623/article/details/109013326
版权
本文探讨了CSS中display:none和visibility:hidden两个属性在隐藏元素时的不同之处。虽然两者都能使元素不可见，但display:none会从文档流中移除元素，其位置被其他元素占据，而visibility:hidden则保持元素在文档流中的位置，空间不被占用。
摘要由CSDN通过智能技术生成

display:none和visibility:hidden的区别？

  • 相同点：元素都会隐藏不见
  • 不同点：
    • display的none隐藏，在文档流中的位置空间被其他元素占据
    • visibility的hidden隐藏，在文档流中的位置空间继续保留，不会被其他元素占据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport
最低0.47元/天 解锁文章
斑码大前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
css元素隐藏原理及display:none和visibility:hidden
09-22
在CSS中，让元素隐藏指屏幕范围内肉眼不可见的方法很多，只不过有的依然保留空间，而有的却消失的不留痕迹,接下来本文将详细介绍下css元素隐藏原理，感兴趣的你可不要错过了哈
实例详解display:none与visible:hidden的区别
11-27
总结一下，`display:none` 和 `visibility:hidden` 的主要区别在于： - `display:none` 会完全移除元素在布局中的存在，而 `visibility:hidden` 只是让元素变得不可见，但保留其在布局中的位置。 - `display:none` ...
display:none;与visibility:hidden;的区别
米刀文
07-20 1万+
如果想让某一段代码在前台不显示，最简单的方法是用css的display:none即可，这样下边的内容就自动上移或右侧的左移来填补这个空隙。但特殊情况下我们只需要隐藏这个元素， 但它的位置不能被占了，那该怎么实现呢？接下来我们来看css的另外一个属性Visibility属性。 visibility:隐藏对应的元素但不挤占该元素原来的空间。 display:隐藏对应的元素并且挤占该元素原来的空间
display：none和visibility：hidden
qq_42132814的博客
11-18 1207
display：none和visibility：hidden的区别和联系： 联系：二者都是设置元素不可见 区别： display：none会使元素从整个DOM树中消失，渲染的时候不占据空间。设置了visibility：hidden的元素仍然在DOM树中占据空间，只是元素不可见。 display：none会使页面发生回流，visibility：hidden只是使此元素发生重绘。 display：none是非继承属性，子孙元素消失是因为父元素在DOM在中
【前端】display:none和visibility:hidden两者的区别
最新发布
06-05 7475
【前端】display:none和visibility:hidden两者的区别
display:none和visibility:hidden
风萧萧兮易水寒
10-12 329
先看一下在css中，能够隐藏元素的方法有哪些 { display: none; /* 不占据空间，无法点击 */ } { visibility: hidden; /* 占据空间，无法点击 */ } { position: absolute; top: -999em; /* 不占据空间，无法点击 */ } { position: relative; top: -999em; /* ...
display:none和visibility:hiddden
眷恋天空的驴
03-17 260
1. 表现层上来说：    二者都会让元素不可见，区别是disply:none是不可见的同时不会占用原来的区域，但是visibility:hidden会占用原来的地方2. 深度理解    测试： 在页面一开始加载的时候display:none 不会进行加载，只有改变为block的时候会进行加载填充。                但是visibility:hidden是在页面一上来的时候就会开始加
display：none与visibility：hidden
qq_43982131的博客
03-04 207
display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint
display:none和visibility:hidden的差别比较与演示代码
09-25
display:none和visibility:hidden的差别:visibility:hidden隐藏，但在浏览时保留位置；而CSS display:none视为不存在，且不加载,感兴趣的朋友可以研究下
opacity:0；Display:none 、visibility:hidden的区别
Ahua_Core的博客
08-14 1202
Display:none详解display:none的用处display:none的实例visibility:hidden也可以隐藏元素display：none的注意事项 display:none的用处 display:none 一般用于JavaScript动态隐藏元素，值得注意的是：被隐藏的元素不占据原本的位置空间 display:none的实例 设置三个行内块盒子，添加相关属性，代码如下： <div class="box1">I am Box 1</div> &l
display: none 和 visibility: hidden 区别
waitti的博客
09-14 256
display:none 元素看不见，也不占据页面空间； visibility: hidden 看不见但仍然占据页面空间；
display: none；和visiblilty:hidden；的区别
fagdg的博客
03-16 1418
一、相同点： 两者都可以隐藏元素 二、不同点： 1、是否占据空间： display: none;隐藏时不占原先的页面空间，不影响页面布局 visiblilty:hidden;隐藏时占据原先的页面空间，影响页面布局 2、是否具有继承性： display: none;不具有继承属性，元素display:none及其子元素都将隐藏不可见 ...
display:none和visibility:hidden两者的区别
高先生的猫
06-16 592
使用css让元素不可见的方法有很多种，裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。很多公司的面试官也常常会问面试者这两者之间的区别。 display与元素的隐藏 如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。 <body>
visibility:hidden 和 display:none
fish_skyyyy的博客
09-08 391
visibility:hidden 和 display:none 的区别 1、继承： display不是继承属性，而visibility是继承属性。 后代元素的visibility属性若存在，则不会继承； 若不存在，则会继承父元素的visibility的值。 父元素的visibility为hidden但是子元素的visibility为visble，那么子元素依旧可见，子元素visibility属性不存在则子元素不可见。而父元素display属性设为none后，子元素全部不可见。 2、空间： 设置displa
display: none和visibility: hidden的区别解释
qq_37734787的博客
11-02 893
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性 1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质
display:none和visibility:hidden的区别
qq_41633396的博客
05-13 63
先演示什么都不设置的情况 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=
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元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值