快速查看网页布局

一般来说我们查看网页里面元素布局都是通过F12一个一个的看，但是有更加快捷的方式

1.添加以下css代码
html * {
    outline: 1px solid red
}
需要注意的是这里我没有使用 border 的原因是 border 会增加元素的大小但是
outline 不会。通过这个技巧不仅能帮助我们在开发中迅速了解元素所在的位置
，还能帮助我们方便地查看任意网站的布局。

2.借助Chrome 的书签功能
一.打开书签管理页
二.右上角三个点「添加新书签」
三.名称随意，粘贴以下代码到网址中

javascript: (function() {
var elements = document.body.getElementsByTagName('*');
var items = [];
for (var i = 0; i < elements.length; i++) {
	if (elements[i].innerHTML.indexOf('html * { outline: 1px solid red
	}') != -1) {
		items.push(elements[i]);
	}
}
if (items.length > 0) {
	for (var i = 0; i < items.length; i++) {
		items[i].innerHTML = '';
	}
} else {
	document.body.innerHTML +=
		'<style>html * { outline: 1px solid red }</style>';
}
})();

然后我们就可以在任意网站上点击刚才创建的书签，内部会判断是否存在调试的
style。存在的话就删除，不存在的话就添加，通过这种方式我们就能很方便的
通过这个技巧查看任意网页的布局了。