隐藏元素的方法
前端如果设置元素不可见，可以使用display: none visibility:hidden opacity: 0
空间占据
display: none隐藏是不占用空间的，会产生回流和重绘visibility: hidden和opacity: 0隐藏了元素，但是仍然占据着空间，只会引起页面的重绘
回流(Layout): 根据生成的渲染树进行回流，得到节点的几何信息； 重绘(Painting): 根据渲染树得到的几何信息，得到节点的绝对像素
子元素继承
display: none这个父元素都不存在了visibility: hidden会被继承，通过对子元素设置visibility: visibleopacity: 0会被继承，子元素不能设置opacity: 1显示，因为opacity这个本就是设置透明度的！
事件触发
display: none元素不存在，无法触发绑定事件visibility: hidden绑定事件无法触发opacity: 0绑定事件是可以触发的
过渡动画
transition只对可数值化的属性有效，因此只有opacity有效
一个需求
建立一个搜索框，当hover搜索框的时候，搜索提示元素通过过渡动画展示；当仅focus搜索框时，搜索提示元素不展示，但搜索框长度通过过渡动画使宽度拉长；要求点击搜索提示框的内容时，可以跳转其他页面。
需求分析:
- 定位问题：输入框和搜索提示的节点拥有父节点，并且父节点的
position为relative，这样就可以设置搜索提示框的绝对定位来设置位置 - 事件处理问题：使用父元素的
hover伪类控制子元素搜索提示框的opacity和高度；使用输入框的focus伪类撑起父元素的宽度；这样当整体被hover时，搜索提示框可以被展示，并且当点击搜索提示框里面的内容那一瞬间，输入框焦点失去，但事件可以被触发，也不用担心会被误触的情况