关于使指定元素无法在视野内看到，有3个方法
display: none;
opacity: 0;
visibility: hidden;
1.display: none; 该方法会改变页面布局。
- 元素彻底消失，脱离文档流。
- 子元素跟随父元素被隐藏，并且无法单独显示。
- 绑定的事件也无法触发。
- 无论如何，DOM节点还是存在的，仍旧可以用 js 操作。
2.opacity: 0; 该方法不会改变页面布局。
- 实际上是元素的透明度为0。
- 子元素 opacity:1 是无效的，元素仍旧无法显示。
- 绑定的事件仍旧可以触发。
3.visibility:hidden; 该方法不会改变页面的布局。
- 使元素不可见。
- 子元素设置 visibility:visible; 后，子元素会显示，但是父元素不会显示。
- 绑定的事件不能触发。
4.height:0和overflow:hidden的组合
overflow:hidden用中文理解就是“溢出隐藏”，也就是盒子以外的内容都咔嚓掉不可见的。加上height:0，只要是一般的非inline水平元素，则元素内部所有子孙都应该是不可见的。
height:0和overflow:hidden组合隐藏“失效”的条件如下：祖先元素没有position:relative/absolute/fixed声明，同时内部子元素应用了position:absolute/fixed声明
5.overflow和text-overflo区别
text-overflow：clip/ellipsis; 属性规定当文本溢出包含元素时发生的事情。
overflow:hidden; 隐藏所有在超过盒子设定宽度范畴外的内容。
