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

此随笔的灵感来源于上周的一个面试，在谈到隐藏元素的时候，面试官突然问我【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】：隐藏元素及元素内的所有内容，但是该元素的位置、宽高等属性值仍然还在。