两种隐藏元素方式【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 11div213 14
二、给div1设置【display: none】:
三、给div1的【display: none】换成【visibility: hidden】:
四、总结:
【display: none】:隐藏元素及元素内的所有内容,并且该元素的位置、宽高等其他属性值一并“消失”;
【visibility: hidden】:隐藏元素及元素内的所有内容,但是该元素的位置、宽高等属性值仍然还在。
上一篇: 用正则表达式替换url参数
下一篇: php处理表单上传文件的方法
推荐阅读
-
display:none;与visibility:hidden;的区别_html/css_WEB-ITnose
-
[HTML/CSS]display:none和visibility:hidden的区别_html/css_WEB-ITnose
-
两种隐藏元素方式【display: none】和【visibility: hidden】的区别及由此引出的问题_html/css_WEB-ITnose
-
两种隐藏元素方式【display: none】和【visibility: hidden】的区别_html/css_WEB-ITnose
-
[HTML/CSS]display:none和visibility:hidden的区别_html/css_WEB-ITnose
-
两种隐藏元素方式【display: none】和【visibility: hidden】的区别及由此引出的问题_html/css_WEB-ITnose
-
两种隐藏元素方式【display: none】和【visibility: hidden】的区别_html/css_WEB-ITnose