一般来说，要测量页面某个元素的大小，直接f12打开开发者工具inspect目标元素就好了，但如果要测量其他的，如两个元素间的距离，是不是就没那么方便了？
这里安利一款chrome插件，better ruler，可以很方便的测量各种距离，更重要的是，它支持吸附到元素，再也不用眯着眼去量一两像素的差异了。
- 点击插件图标启动，再次点击退出。
- 移动鼠标的同时按住
Alt键(Option, 如果是mac)，可实时显示当前鼠标位置元素的大小。 - 移动鼠标的同时按住
Alt键(Option, 如果是mac)，如果在吸附范围内(距离元素边界50px内，距离顶点20px内，具体数值可在底部工具栏自定义)可自动吸附。 - 双击当前层进入编辑模式，可进行拖拽和缩放。再次双击（或者按下
Esc）则退出编辑模式。按下Backspace删除当前层。 - 按下
f键(默认，可配置)，切换显示和隐藏底部工具栏。 - 按下
shift键，切换显示和隐藏尺寸大小。 - 进入chrome://extensions，找到本插件并开启
允许访问文件网址，即可对本地html文件生效。
