CSS进阶(20)—— 详解display:none和visibility: hidden的区别

栏目: CSS · 发布时间: 5年前

内容简介:对于一个display计算值是none的元素而言,该元素及其后代元素全部都被隐藏(请记住这个概念,等下对比下visibility的说法)。你可以认为当前元素从dom文档流中“消失了”,当然不是真正的消失,这个节点依旧存在于文档流中,因此vue中的v-show对应的是CSS的display值,而v-if则是彻底删除节点,跑的有点偏,回归正题。当一个元素被设置为display:none的时候,该元素无法被点击,同时占据的空间消失。一般情况下,是这样,但这里需要排除一种特殊情况,如下:在本例中,表单元素确实无法被

对于一个display计算值是none的元素而言,该元素及其后代元素全部都被隐藏(请记住这个概念,等下对比下visibility的说法)。你可以认为当前元素从dom文档流中“消失了”,当然不是真正的消失,这个节点依旧存在于文档流中,因此vue中的v-show对应的是CSS的display值,而v-if则是彻底删除节点,跑的有点偏,回归正题。当一个元素被设置为display:none的时候,该元素无法被点击,同时占据的空间消失。一般情况下,是这样,但这里需要排除一种特殊情况,如下:

<form>
    <input id="hide" type="submit" style="display:none"/>
    <label for="hide">点击触发提交</label>
</form>
复制代码

在本例中,表单元素确实无法被点击,但由于label绑定了id为“hide”的元素,因此点击label标签依旧可以触发click事件,所以说无法被点击的说法是没问题的,但该元素的点击事件依旧被保留,并且可以通过其他手段触发。

display:none显隐控制并不会影响CSS3 animation动画的实现,但会影响transition的过渡动画效果,因此如果要用到transition的话,建议使用visibility。

除了动画效果外,display:none还会影响CSS的计数队列。举个例子,10个列表从1开始计数,当第二个列表的display置为none,就会导致计数器忽略当前元素,原来的第三个列表则计数为2。

2.visibility与元素的显隐

说起visibility属性,很多人简单的认为display:none和visibility:hidden两个隐藏的区别就在于display:none隐藏后的元素不占据任何空间,而visibility:hidden隐藏的元素空间依旧保留。这也是我们通常意义上区分两者并能产生实际作用的关键点。除了保留隐藏空间,visibility还有许多有意思的属性,甚至跟display完全不一样的点,下面我们来一起捋一捋。

首先visibility和display最大的区别点在于,父元素设置了visibility:hidden后,子元素也隐藏的深层原因在于子元素会继承父元素的visibility:hidden,因此,当我们需要隐藏父元素而又要显示部分子元素的时候,只需要把子元素继承的visibility改成默认的visible属性即可,这一点在被设置了display:none的元素上,根本不可能实现。我们来通过一个例子,验证一下上面的理论

```html

list1

list2

list3

list4

验证visibility本身占据空间

```

CSS进阶(20)—— 详解display:none和visibility: hidden的区别

visibility的元素的子元素只是单纯的继承了父元素的visibility,因此在CSS计数方面不会有任何影响,这点和display:none也有所不同。同时transition过渡是支持visibility属性的,因此在使用过渡动画的时候,想让元素实现淡入淡出效果来控制显隐的可以使用visibility:hidden。

本章内容跳过了原著第九章关于color和background的部分,下一章为包含了原著一些个人认为杂七杂八的属性,包含跳过的部分,有兴趣的可以点个关注。

不忘初心,方得始终

喜欢博主的童鞋可以扫描二维码加博主好友~ 也可以扫中间二维码入驻博主的粉丝群(708637831)~当然你也可以扫描二维码打赏并直接包养帅气的博主一枚。

CSS进阶(20)—— 详解display:none和visibility: hidden的区别 CSS进阶(20)—— 详解display:none和visibility: hidden的区别 CSS进阶(20)—— 详解display:none和visibility: hidden的区别


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

精通数据科学:从线性回归到深度学习

精通数据科学:从线性回归到深度学习

唐亘 / 人民邮电出版社 / 2018-5-8 / 99.00元

数据科学是一门内涵很广的学科,它涉及到统计分析、机器学习以及计算机科学三方面的知识和技能。本书深入浅出、全面系统地介绍了这门学科的内容。 本书分为13章,最初的3章主要介绍数据科学想要解决的问题、常用的IT工具Python以及这门学科所涉及的数学基础。第4-7章主要讨论数据模型,主要包含三方面的内容:一是统计中最经典的线性回归和逻辑回归模型;二是计算机估算模型参数的随机梯度下降法,这是模型工......一起来看看 《精通数据科学:从线性回归到深度学习》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具