CSS实现隐藏页面元素的方法和区别

四种方法：

1.display: none;

2.overflow: hidden;

3.visibility: hidden;

4.opacity: 0;

 1.display: none;

特性：

（1）诛连性

（2）不占位

（3）给谁设置，则谁原本占据的位置不存在（相当于直接被删除），同时其子级也消失。

浏览器直接就不解析该元素的所有元素，包括其子级元素。

（4）给某元素设置display:none;后，即使给该元素添加一个hover状态，或是给该元素的子级元素添加display：block;也不能实现内容重现。

 

初始内容 

 

在父级添加display:none; 

 

父级原本占据的位置不存在（相当于直接被删除），同时其子级也消失

不占位

 

 给该元素添加一个hover状态，或是给该元素的子级元素添加display：block;也不能实现内容重现

 

 

 2.overflow: hidden;

特性：

（1）超出部分隐藏

（2）仍占位,视觉上消失，但仍在文档流中占据空间，等价于设置透明度为0，浏览器仍然解析该元素

（3）使用overflow: scroll;滚轮显示出超出的部分

初始内容 

 

 

 父级添加overflow: hidden;

 

效果 

 

 使用overflow: scroll;滚轮显示出超出的部分

 

效果 

 

 3.visibility: hidden;

特性：

（1）仍占位

（2）直接隐藏（可以对子级元素设置visibility: visible;只显示子元素） 

 仍占位

 

 

 可以对子级元素设置visibility: visible;只显示子元素

 

 

 4.opacity: 0;

 特性：

（1）隐藏该元素，设置透明程度为0，但不影响布局

（2）仍占位

（3）比如该元素绑定一些事件，点击该区域还是能触发所绑定的事件（click）

（4）某元素设置了opacity:0;则给该元素设置一个hover状态，（opacity:1;）可重现其内容

 

占位 

 

 给该元素设置一个hover状态，（opacity:1;）可重现其内容

 

鼠标放在父级区域，则重现其内容