[分享]My favorite CSS hack

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }

是作者@Gajus Kuizinas从2014年分享后使用至今的一段代码。

出自:

https://dev.to/gajus/my-favorite-css-hack-32g3

干什么用的?
它以不同深浅的颜色,快速标示出各个不同深度的节点,帮助你以最便捷的方式,查看页面上的每个元素的大小,以及他们的margin、padding等等。

在浏览器中,按”F12″调出开发者工具,将上面这段代码添加到样式里,效果示例:

是不是一目了然?

发表评论

电子邮件地址不会被公开。 必填项已用*标注