气泡组件在实际工作中非常普遍，无论是网页中还是app中，比如：
我们这里所谓气泡组件是指列表型气泡组件，这里就其dom实现，css实现，js实现做一个讨论，最后对一些细节点做一些说明，希望对各位有用
小钗最近初学CSS，这里做一个专题，便于自身CSS提升，文章有不少问题与可优化点，请各位指导
组件分类单由气泡组件来说，他仍然属于“弹出层”类组件，也就是说其会具有这些特性：
① 布局为脱离文档流
② 可以具有mask蒙版，并且可配置点击蒙版是否关闭的特性
③ 可选的特性有点击浏览器回退关闭组件以及动画的显示与隐藏动画特性
其中比较不同的是：
① 不是居中定位
② 具有一个箭头标识，并且可以设置再上或者在下
③ 因为具有箭头，而且这个箭头是相对于一个元素的，一般意义上我们任务是相对某个按钮，所以说具有一个triggerEL
所以单从这里论述来说，我们的组件名为BubbleLayer，其应该继承与一个通用的Layer
但是，就由Layer来说，其最少会具有以下通用特性：
① 创建——create
② 显示——show
③ 隐藏——hide
④ 摧毁——destroy
而以上特性并不是Layer组件所特有的，而是所有组件所特有，所以在Layer之上还应该存在一个AbstractView的抽象组件
至此继承关系便出来了，抛开多余的接口不看，简单来说是这样的：
单从dom实现来说，其实一个简单的ul便可以完成任务
http://sandbox.runjs.cn/show/9ywitfn8
不足与扩展上面作为基本实现，没有什么问题，但是其实际应用场景会有以下不足：
① 基本的ul层级需要一个包裹层，包裹层具有一个up或者down的class，然后在决定那个箭头是向上还是向下
② 我们这里不能使用伪类，其原因是，我们的小三角标签并不是一定在中间，其具有一定滑动的特性，也就是说，这个小三角需要被js控制其左右位置，他需要是一个标签
根据以上所述，我们的结构似乎应该是这个样子滴：
<ul>