方式一：overflow:hidden
这种方式会使得超出的元素隐藏，对行内元素无效，必须是块级元素，隐藏之后元素依然占据着位置。
方式二：display:none
这种方式会使得元素不存在，占据的位置也不存在。
方式三：visibility: hidden
这种方式会使得元素不存在，但是占据的位置依然存在。
方式四：opacity: 0
这种方式会使得元素的透明度为0，隐藏，但是位置依然占据着。
display: none和visibility: hidden和opcaity: 0三者这件的区别是什么？
DOM结构
- display: none，浏览器不会渲染该元素，不占据空间。
- visibility: hidden，元素被隐藏，但是会被渲染，占据空间。
- opacity: 0，透明度为0，元素隐藏，占据空间。
事件监听
- display: none，无法进行DOM事件监听。
- visibility: hidden，无法进行DOM事件监听。
- opacity: 0，无法进行DOM事件监听。
性能
- display: none，动态改变该属性会引起重排，性能较差。
- visibility: hidden, 动态改变此属性会引起重绘，性能较高。
- opacity: 0，提升为合成层，不会触发重绘，性能较高。
继承
- display: none，不会被子元素继承，因为子元素不会被渲染。
- visibility: hidden，会被子元素继承，子元素可以通过设置visibility: visibile来取消隐藏。
- opacity: 0，会被子元素继承，并且子元素无法通过opacity:1来取消隐藏。