在业务开发过程中或,想必大家经常会需要查看一个元素的位置及大小并修改它的 CSS,因此就会频繁使用到 DevTools 中的选择元素功能。
在UI小姐姐做视觉还原时,会需要查看一个元素的位置及大小,因此就会频繁使用到 DevTools 中的选择元素功能。
其实我们可以使用一个 CSS 技巧给所有元素加上 outline
,这样就能迅速了解自己所需的元素位置信息,无须再选择元素查看了。
第一步
第二步
展示如下
我们只需要添加以下 CSS 就能为任何网站添加这样的效果
html * {
outline: 1px solid red
}
需要注意的是这里我没有使用 border
的原因是 border
会增加元素的大小但是 outline
不会。
通过这个技巧不仅能帮助我们在开发中迅速了解元素所在的位置,还能帮助我们方便地查看任意网站的布局。