display: none 和 visibility: hidden 的共性与区别

最新推荐文章于 2024-06-05 00:48:32 发布
最新推荐文章于 2024-06-05 00:48:32 发布
阅读量356 收藏 1
点赞数 9
文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52401264/article/details/139301360
版权

display: none 和 visibility: hidden 的共性与区别

  • 共性：display: none 和 visibility: hidden 都是用于设置元素可见性的样式

  • 区别

    • display: none
      • 使元素及其占位完全消失：元素及其所有子元素将从文档流和布局中完全消失，就像它们不存在一样。
      • 触发回流：这种改变会触发页面上的布局重建，因为其他元素会填补被移除元素的空间。
    • display: hidden 修饰的元素不可见，但还在文档流中。元素的隐藏可以理解为加上了一层使元素不可见的遮罩，不会触发元素回流，页面布局不变。
      • 使元素不可见，但保留其占位：元素仍然占据文档流中的空间，但不会被显示。
      • 不触发回流：这意味着其他元素会围绕隐藏的元素布局，不会发生重建布局的情况。

  • 代码效果演示（对 Parent 元素上样式）

    • 页面原始布局

      image-20240529171854784

    • display: none 之后的布局

      image-20240529171937557

    • visibility: hidden 之后的布局

      image-20240529172011001
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6591
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
回流（Reflow）与重绘（Repaint）
连通块的应用
12-02 706
1. 回流与重绘 1）回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时， 浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响）， 然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。 2）重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时， 浏览器不需重新计算元素的几何属...
转：display:none与hidden区别
qq_33765174的博客
08-03 3947
转：今天做毕设时遇到了一个小问题，我做了一个tab导航栏，点击一个tab页其它tab页隐藏，这时候第一想法是使用display：none来控制显示隐藏，写了之后发现使用display会有一个问题，就是第二个tab页的轮播图是在页面渲染时获取第二个tab页中某个元素的宽度来做自适应效果，因为已经隐藏，宽度为0，所以导致轮播图的高度也为0，后来把display:none改为visibility：hid...
display none 隐藏后怎么显示_display:none与visibility：hidden的区别？
weixin_39657662的博客
11-29 621
“因为平时总是觉得自己不停的修改bug，好记性不如烂笔头，所以把自己每天遇到问题记录下来。”要想知道两者的区别，就要知道他们代表的是什么意思，其实两者都是对内容进行隐藏的的声明；两者都会在页面中消失，都不可被选中，但display：none是不会占用时间尺寸的，而visibility：hidden在页面这是会占用尺寸的。可以实现对内容进行隐藏的CSS声明：1、display：none ...
详解display:none、visible:hidden和type ="hidden"
明天的你会感谢今天的自己
08-09 4455
  1  display:none和visible:hidden都能把网页上某个元素隐藏起来，他们的区别是：      visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。      display: none----将元素的显示设为无，即在网页中不占任何的位置。 举个例子： 例如有三个table，将中间的一个table hidden掉，你会发现在那个...
displaynone与visiblehidden的区别
wangshu696的专栏
01-27 783
displaynone与visiblehidden的区别 displaynone和visiblehidden都能把网页上某个元素隐藏起来，但两者有区别 displaynone ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 visiblehidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说
display:none和visible:hidden区别
xamjj的博客
05-09 379
1、display:none和visible:hidden都能把网页上某个元素隐藏起来。 2、但两者有区别: ●display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 ●visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。 1、visibility: hidden...
display:none和visibility:hidden的区别
weixin_46412436的博客
06-11 103
使用css让元素不可见的方法有很多种，裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。很多公司的面试官也常常会问面试者这两者之间的区别。 display与元素的隐藏 如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。 <body> &l
前端优化之回流（Reflow）与重绘（Repaint）
qq_45716607的博客
06-14 431
回流（Reflow）与重绘（Repaint） 开篇我们先对上上节介绍的回流与重绘的基础知识做个复习（跳读的同学请自觉回到上上节补齐 →_→）。 回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。 重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性
display:none 和visibility:hidden的区别
evalost的博客
06-14 179
display: none 设置属性后，元素消失在文档流中，不再占位。因此也会导致文档页面重新构建，产生回流。=》性能差。 元素以及它的所有后代元素都会隐藏。 visibility: hidden 隐藏元素仍需占用与未隐藏时一样的空间，即仍然会占位，影响页面布局。也因此不会产生回流。 visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。如果重新给子元素设置visibility: visible,子元素又会显示出来。 ...
display:none与visible:hidden的区别
帅气的鎏氓兔
09-03 278
display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别: display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 让其显示可以另其display转换为block等. visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得
display: none和visibility: hidden的区别解释
qq_37734787的博客
11-02 956
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性 1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质
display和visibility隐藏的区别
weixin_44874595的博客
08-12 404
一、display：none隐藏 用display：hidden隐藏的时候，会对元素的原先所占的空间也进行隐藏，即当它隐藏时，它不再占有原来的空间。 二、visibility：hidden隐藏 用visibility：hidden隐藏的时候，元素原来所占据的空间依然占据。 ...
css中元素的显示与隐藏
fighting_dream的博客
01-30 514
1.display属性 display:none；【隐藏元素】 未加display属性时： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl
【前端】display:none和visibility:hidden两者的区别
最新发布
努力才是唯一的入场券。
06-05 7908
【前端】display:none和visibility:hidden两者的区别
Javascript与Jquery知识点
weixin_WH841320859的博客
01-07 1307
前端Javascript与Jquery知识点
display: none 与 [hidden] 的区别
lio-zero 的博客
02-10 790
HTML5 添加了 hidden 属性，该属性与 CSS display: none 具有相同的效果。如果使用 hidden 属性，则无论其值如何，都不会显示元素： <div hidden> <!-- 这将从屏幕上消失 --> </div> 两者都会对屏幕阅读器隐藏内容。 区别 display: none 和 hidden 属性的工作方式相同。但是 hi...
overflow：hidden与display：none的区别
weixin_45904557的博客
03-16 2188
1、Display:none 隐藏 但是在原来的标准流不占位置，使用此属性之后元素不存在了，元素占据的位置也不存在。 2、Overflow:hidden 对行内元素无效，必须是块级元素，并且设置宽度高度。 Overflow:hidden,隐藏之后元素依然占据着位置。视觉上消失了，可以理解为透明度为0的效果，在文档流中占位， display:none和visible:hidden 相同点： 都能把网页上某个元素隐藏起来。 二、diaplay：none与visibility：hidd
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值