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