今天模仿阿里云官网，在做到导航时，当鼠标移动到每一个导航时，导航下面都会有一个
出现一个横条。起初以外是border-bottom，结果查看时发现，是有一个单独的div，
写成了线条的形式，当鼠标移动到对应的导航条时，该线条的长度就由0变为对应dom的
长度，位置则正好对应相应的dom。
这是怎么做到的呢？
查看代码时没发现有绑定函数，也没有固定的id。在我的映像中，这是无法做到的，到底是怎么回
事呢？
既然没有看到id，只能猜测是由addEventListener()，直接在dom上绑定了onmouseenter函数，
然后传入了event。要进行接下来的内容，需要我们先了解一些内容。
1.web世界中的坐标系。
web世界中的坐标系是从左上角开始，有两个远点，向右是x，向下是y。
- 文档远点
是以整个文档的左上角为坐标远点。 - 视口坐标
以显示内容的窗口左上角为远点。
2.event.target
event当作参数传入到函数后，会带一系列的参数。其中event.target基本上相当
于docuemnt.getElementById(‘id’)了，可以获取dom的很多参数。所以我们可以
通过event.target来获取元素的位置，宽度，高度。
在要进一步讲述之前，我还是得先讲一些基本概念了。
offsetWidth 和offHeight返回dom元素的色觉大小。包括内容，padding,
boder。
offsetLeft和offsetTop返回元素文档原点的x，y坐标。若父元素或其它祖先元素已经被定位，则返回
元素相对于父元素的坐标。这时候还得通过offsetParent来获取元素的坐标。
clientWidth和clientHeight。返回元素的内容和padding。不包括border。
scrollWidth和scrollHeight。返回元素的content加padding再加上溢出的内容。
scrollLeft和scrollTop返回指定条的位置。且这两个元素可写。
好了，你现在可以根据上面的概念来获取想要的内容了。比如：event.target.offsetWidth
3.直接用函数获取，简单直接。
用函数getBoundingClientRect()来一次性获取。具体如下代码，就这么简单。
返回参数包括left，top，right，bottom。有时还包括width和height属性。
left表示元素左上角的x坐标，top表示元素左上角的y坐标。right表示元素右下角的x坐标
bottom表示元素右下角的y坐标。
1 | event.target.getBoundingClientRect() |
嗯，这就结束了。至于那条线，如果还不知道怎么做，等我过一会儿接着写。