四种方法:
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;)可重现其内容
鼠标放在父级区域,则重现其内容