display和visibility隐藏元素的区别

display和visibility隐藏元素的区别

介绍

也是最近几个月才接触到前端开发的,过程中遇到过一些问题,对于一些概念也有部分自己的观点,不完全正确,纯为知识交换。

display隐藏元素

对于display这个属性大家应该不会陌生,block常用来定义元素的类型,常用的属性值如block,inline-block,none等
当给元素的display属性设置为none值后,元素不可见,不占文档流,且若不审查根本找不到该元素
在这里插入图片描述图中cell1设置为display:none;表示该元素不可见,在审查元素中,点击该元素页面中也无任何显示。
并且cell1的子元素p中并未继承来自父级的diaplay属性,如图:
在这里插入图片描述
由此可得,display隐藏元素的特点有:
1、不占文档流,及不会影响其他元素的布局
2、display属性不会继承给后代

visibility隐藏元素

visibility通过设置属性值为hidden,达到对元素的隐藏效果
在这里插入图片描述
如图已经给cell1设置了visibility:hidden;
在这里插入图片描述细心你应该已经发现了这张图与上面设置display:none时的不同之处。似乎cell2元素被“挤”下来了,那这又是为什么呢
审查元素后发现,cell1仍然在当前位置,只不过看不到了而已
在这里插入图片描述
再看看该属性的继承性
在这里插入图片描述由图可见,cell1中的p标签继承了来自父级的visibility属性,所以自身也一起隐身了,所以这里与display:none,不同的就是前者是将隐藏继承给子代,而display:是将该元素及元素内的一切全部设为不显示,那如果我给cell1中的p标签设置一个visibility:visible呢?,让我们来看一下
在这里插入图片描述我们发现只有p标签中的内容显示了,而父级cell1此时仍旧只是占了个位置罢了

总结

对比两种隐藏元素的方法,我们可以得出以下结论:
1、display隐藏元素会脱离文档流,visibility则不会。
2、display属性不会遗传给后代,visibility会。
3、display:none后会影响当前布局,visibility:hidden不会。(实际上这一条可以与第一条合并)

以上是我对这两种隐藏元素方式的理解,大家如果有补充或不同意见也可以一起交流一下。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值