《精彩绝伦的CSS》——布局（一）用轮廓代替边框

一、用轮廓代替边框（outline）

平时布局时，习惯用border来看布局效果，但是border有个缺点就是border参与布局，而接下来要讲的outline则不会。

创建布局时，可以像下面这样使布局块的放置位置可视化

div{outline:1px dashed red;}

效果：

其实。。并看不出有什么不同。但还是要说轮廓的特点的：

首先，轮廓必然是环绕着元素的，并且在元素周围永远保持一致，即宽度，颜色一致

其次，由于轮廓不参与布局，因此当设计了较宽的轮廓时不会引起布局变化，轮廓会直接与其他部分发生重叠，所以我们完全不用担心破坏布局

最后要注意的是，轮廓和变宽可以同时存在，此时轮廓会绘制在边框之外，而且如果元素具有外边距，则轮廓也会绘制在外边距所在区域之上（不是在外边距外面）。