display 与 visibility 的区别

最新推荐文章于 2022-01-17 05:00:33 发布
最新推荐文章于 2022-01-17 05:00:33 发布
阅读量468 收藏
点赞数
分类专栏： Html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuanjiewu/article/details/8103691
版权

visibility : hidden;  不管有没有显示出来， 它都是存在的， 都会占用空间  ；

而display : none;   虽然也是用来控制显示 , 但它不会像visible那样 ，它要是没有显示的话  ，不会占用面积， 但是它要是显示的话， 则会和visible一样 都会占用面积。

 

display : block;    //显示

display : none;    //不显示

visibility : visible;   //显示

visibility : hidden;   //不显示

 

 

 

炫街舞
关注
专栏目录
CSS Display与Visibility区别和用法
m0_54889555的博客
03-07 1406
CSS Display与Visibility区别和用法 CSS属性display和visibility容易混淆，visibility和display两个属性都有隐藏元素的功能。visibility属性所控制的元素虽然不在浏览器里面显示出来，但他在浏览区里是存在的，只是不显示而已。而display属性设置为none，这个元素就变成了一个不显示的元素。 一、Display的属性值 block：表现为一个块级元素（一般情况下独占一行） 当display被设置为block(块)时，容器中所有的元素将会被当作一个单独
隐藏中display与visibility区别
weixin_42583802的博客
05-13 122
1.display：none； 不占原来的位置： 左边显示第一个盒子，右边隐藏第一个盒子。 2.visibility:hidden; 原来位置保留： 左边显示第一个盒子，右边隐藏第一个盒子。
详解display与visibility的区别
董小礼的博客
04-04 1258
两者看似都是起到隐藏元素的作用，但其实两者之间的差别还是特别大的从上代码可以看处，display隐藏后，div不会占用位置而使用visibility隐藏的div还是占用位置的，这就是两者的区别所在！！！...
display、visibility和opactity的区别
CamilleZJ的博客
07-01 650
1、display：none； DOM结构：浏览器不会渲染display属性为none的元素，不占据空间，意思就是页面上没有它的一席之地，你在开发者模式中选不中那个元素。 事件监听：无法进行DOM事件监听。 性能：动态改变此属性时会引起重排，性能较差。 继承：不会被子元素继承，因为子元素也不被渲染。 transtion过渡不支持display。 2.、visibility：hidden； DOM结构：元素被隐藏了，浏览器会渲染visibility属性为hidden的元素，占据空间，意思就是页面上
display与visibility区别
Danny Chen的专栏
05-21 725
if($("#xxx").css("display") == "block"){             $(e).parents('td').children('ul').hide("slow");         }
CSS中的display与visibility
前端学习博客
01-17 410
文章目录一.display: none二.visibility: hidden三.opacity: 0四.`display: none`与`visibility: hidden`的区别五.元素隐藏方法总结： 一.display: none DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间； 事件监听：无法进行 DOM 事件监听； 性能：动态改变此属性时会引起重排，性能较差； 继承：不会被子元素继承，毕竟子类也不会被渲染； transition：transition 不支持
visibility与display的区别：
jinlovo
01-08 5901
visibility与display之设置元素显隐的区别 在CSS里的visibility 属性，通常其值被设置成visible 或hidden。 visibility：hidden 相当于display：none，能把元素隐藏起来，但是两者的区别在于： display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘） visibility：hidden 隐藏对应元素，在...
display与visibility的区别
sunshine1990916的博客
08-08 266
CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏，但是两者还是有区别的，总结为以下三点： 1、被隐藏元素是否占据空间 2、后代元素的可见性 3、对计数器的影响 4、动画效果 下面分别对上述三个区别进行说明： 一、被隐藏元素是否占据空间 display:none隐藏后的元素不占据空间，visibility:hidden隐藏后的元素仍...
display、opacity、visibility的区别？
yiyueqinghui的博客
07-10 1028
共同点 都让元素不可见 二者区别 隐藏后是否占据原有空间 display：none 从渲染树中消失，不占据空间，不能点击 visibility：hidden 从渲染树消失，占据空间，不能点击 opacity：0 从渲染树消失，占据空间，可以点击 性能 display：none 引起页面回流与重绘，性能消耗大 visibility：hidden 只造成本元素的重绘，性能消耗较少 opacity：0 只造成本元素重绘，性能消耗较少 这一点的区别是由于是否隐藏后是否占据原有空间的区别而引起的 继承
css display和visibility区别
朝花夕拾的博客
12-24 426
display 两个属性 block 显示 none 隐藏 visibility 两个属性 visible 显示 hidden隐藏 visibility 占用空间 display 不占用空间
CSS属性中Display与Visibility区别分析
09-25
在CSS中，`display`和`visibility`两个属性都是用于控制元素的可见性，但它们之间存在着本质的区别。首先，`visibility`属性主要用于决定元素是否可见，而不改变元素的布局。当`visibility`设置为`hidden`时，元素的...
display和visibility的区别示例介绍
11-30
在网页布局和样式设计中，`display` 和 `visibility` 是两个非常重要的CSS属性，它们都能用来控制元素的可见性，但实现方式和效果大不相同。本篇文章将深入探讨两者之间的区别，并通过示例来具体说明。 首先，`...
CSS Display与Visibility的不同
09-27
总之，`display`和`visibility`都是控制元素可见性的工具，但它们的核心区别在于是否保留元素的布局空间。`visibility:hidden`仅隐藏元素内容，保留空间；而`display:none`则同时移除元素及其占用的空间。了解这两者...
display和visibility的区别
09-24
总结来说，`display` 和 `visibility` 的主要区别在于： 1. `visibility` 只改变元素的可见性，不改变布局，隐藏后仍保留空间。 2. `display` 不仅改变可见性，还影响布局，隐藏后不再占用空间。 在实际应用中，...
HTML 的超链接 a 标签中如何设置其宽度和高度
热门推荐
xuanjiewu的专栏
07-30 1万+
在DIV CSS布局中，html 中 a 超链接标签，直接对其设置宽度和高度不能生效，设置宽度和高度也不起作用，这里为大家分享如何实现 a 标签宽度和高度。 解决方法： 1、对 a 标签样式加 display:block; 或者 display:inline-block;  让其转换为块级元素； 2、通过 float属性（float:left; ） 让它成浮动状态； 3、当然以上两种方法一
手机移动端上滑懒加载实现
xuanjiewu的专栏
11-10 1万+
参考网址：http://www.jq22.com/jquery-info6960 http://ons.me/526.html/comment-page-1 加载底部 *{ margin: 0; padding:0; -webkit-tap-highlight-
div中的图片居中对齐 or vertical-align:middle 属性设置无效
xuanjiewu的专栏
06-29 9439
vertical-align 只对行内元素有效，对块级元素无效。 这就是为什么有些人使用vertical-align属性无效的原因。 但是我们可以使用display 属性，设置其值为 table-cell，将块元素转化为单元格，然后再使用vertical-align属性。
如何跨 frame 获取页面元素和函数
xuanjiewu的专栏
08-30 5039
在 html 的 frame 框架中，如何在右侧 frame 内容发送变化后，想改变 frame 左侧的菜单样式，那么在 右侧框架中该如获得左侧框架页面中的菜单元素呢？ 示例：                 用 window.parent.framname  框架的名称即可获得相应 frame 页面： function return(){         var lef
js 动态生成html 触发事件传参字符转义
xuanjiewu的专栏
07-26 4527
通常，在使用 JS 动态生成 html 的过程中，会嵌入相应的样式、事件等属性元素，而这时经常会出现所谓的 “单、双引号不够用” 的情况，别急，这时可以利用 html 语言中的转义字符来解决。下面就来介绍一下相应的转义字符吧：   & —— (ampersand) 转义字符对应为   & “   —— (double quote) 双引号，转义字符对应为  " '
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值