欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

两种隐藏元素方式【display: none】和【visibility: hidden】的区别_html/css_WEB-ITnose

程序员文章站 2022-03-25 16:43:56
...
此随笔的灵感来源于上周的一个面试,在谈到隐藏元素的时候,面试官突然问我【display: none】和【visibility: hidden】的区别,我当时一愣,这俩有区别吗,好像有,但是忘记了啊,因为平常基本都是用【display: none】,几乎没用过【visibility: hidden】,我只好如实回答。面试结束后回到家的第一件事就是敲代码测试,下面就是测试过程及结果:

一、首先在页面中放2个div,并用不同的背景色区分他们:

 1  2  3  4  5 两种隐藏元素方式的区别 6  9 10 11 
div2
13 14

二、给div1设置【display: none】:

div1

三、给div1的【display: none】换成【visibility: hidden】:

div1

四、总结:

【display: none】:隐藏元素及元素内的所有内容,并且该元素的位置、宽高等其他属性值一并“消失”;

【visibility: hidden】:隐藏元素及元素内的所有内容,但是该元素的位置、宽高等属性值仍然还在。