前端开发技巧1：使用outline和*切图更方便

情景分析：有时候我们需要知道某个元素的所占位置大小如何，元素的布局使用的是哪种样式，除了使用浏览器的一些辅助工具外，还可以使用css样式搞定。例如下图中的文字排列。

html代码如下：

<div class="text">
	<p>文字1</p>
	<p>文字2</p>
	<p>文字3</p>
</div>

实现以上的css样式有很多种，这里就列举两种。 第一种：

.text{
	display:flex;
	flex-derection:row;
	justify-content:space-around;
	border:1px solid black;
}
.text>p{
	text-align:center;
}

第二种:

.text{
	display:flex;
	flex-derection:row;
	justify-content:space-between;
	border:1px solid black;
}
.text>p{
	width:100%;
	text-align:center;
}

如何看出使用哪种布局，除了查源代码，我们还可以使用outline加*使得切图更方便。

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用，且轮廓线不会占据空间。 css样式中的*{}表示样式通配，会匹配项目中所有元素。 那么结合以上两者的可以有：

*{
	outline:2px dashed blue;
}

则会对项目中的所有元素通配一个外轮廓。 效果图如下：

对上面的例子使用outline。 第一种：

第二种：

这样对元素的位置大小非常清晰了，由此可见使用outline和*就可以很好的标出所有元素的的轮廓，可以比较清晰的看出元素所占位置，大小等。

小声说话：百尺竿头，更进一步。