测量网页元素的大小和间距的利器

一般而言，对于测量页面某个元素的大小，直接f12打开开发者工具inspect目标元素就好了，但如果要测量其他，如两个元素间的距离，是不是就没那么方便了？

这里安利一款chrome插件，better ruler，可以很方便的测量各种距离，更重要的是，它支持吸附到元素，再也不用眯着眼去量一两像素的差异了。

点击插件图标即可开始测量，再次点击将退出测量。
移动鼠标的同时按住Alt键(Option, 如果是mac)，可实时显示当前鼠标位置元素的大小。
移动鼠标的同时按住Alt键(Option, 如果是mac)，如果在吸附范围内(距离元素边界50px内，距离顶点15px内，具体数值可在底部工具栏自定义)可自动吸附。
按下f键，快速显示和隐藏底部工具栏。
按住shift键，切换显示和隐藏尺寸和关闭按钮。

测量网页元素的大小和间距的利器相关推荐

php 页面拖动改变大小,鼠标拖动改变DIV等网页元素的大小的实现方法
1.初次实现 1.1 html代码 div change width by drag div change width by drag 1.2 js代码 var eleLeft = $('#myDiv ...
鼠标拖动改变DIV等网页元素的大小的最佳实践
1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" la ...
Android WebView加载网页，图片等元素宽度大小不兼容手机屏幕的宽度
无论是Android手机还是iOS手机,使用WebView加载一些没有专门为手机屏幕做适配的网页的时候,就会出现网页中的图片等标签元素的宽度大小和手机屏幕的宽度不一致的情况,如下图之所以会出现上面的 ...
CSS-7-美化网页元素
CSS -> 美化网页元素 1. 为什么要美化元素有效的传递页面信息美化网页,页面漂亮,才能吸引用户凸显页面的主题提高用户的体验 span标签:一种约定俗成,重点要突出的字,使用span ...
4H5样式控制CSS1-美化网页元素
#CSS美化网页元素在某一段文本中突出显示某几个字,以粗体.红色.大字号显示,通常使用(<span> )标签在CSS中,设置文本行高使用(line-height)属性在CSS中设置背 ...
网页元素常见的定位方式
1. 流式定位这是网页元素默认的定位方式,网页元素按照其HTML标签的先后顺序,在网页内依次显示,就像液体一样"流动",所以称为"流式定位",这种方式将所有网 ...
html字体自动放大,让用户自己控制网页字体的大小的css书写方法
让用户自己控制网页字体的大小的css书写方法更新时间:2007年09月18日 20:31:41 作者: 现在国内绝大多数的站点都用CSS把字体大小设定为12px,像素虽然也是相对尺寸单位,但只是 ...
CSS 美化网页元素
文章目录 1.为什么要美化网页元素 2.span标签 3.字体样式 4.文本样式 4.1.颜色 4.2.文本对齐的方式 4.3.首行缩进 4.4.行高 4.5.装饰 5.超链接伪类以及文本阴影 6.列 ...
25套用于 Web UI 设计的免费 PSD 网页元素模板
Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. ...
android测量网页加载时间
如果被测浏览器用的是webkit内核,或者是自己写的程序,总之就是如果可以获取对应的webview对象:可以通过重写webviewclient来获取加载时间.webviewclient中的onPage ...

测量网页元素的大小和间距的利器

测量网页元素的大小和间距的利器相关推荐

最新文章

热门文章