啰里八嗦

今天不瞎扯了，我想嘱咐你几句。你做为一名程序猿，一定多注意身体，尤其是职业病---颈椎病、肩周炎，一定要多起身活动活动，多注意休息，照顾好自己，锻炼起来，别懒。

痛点

我们知道，web布局可以理解为就是堆盒子，盒子嘛，就是一个块堆一个块，也就是一个矩形加一个矩形，所以文字只能围在矩形的周边，也就是下面这样。

新的伙伴

shapes允许我们在浮动元素中用css设置几何形状和图片用来设置文本流动的区域，到底是什么呢？接下来我们用个简单的demo揭开它的神秘面纱。

以上的布局很简单，这里就不解释了，我们主要说下 shape-outside 这个属性，可以看到我们设置了这个属性，文本流不再是一个矩形而是围绕着元素的圆形区域进行排列。

兼容性

虽然目前是实验性的，不过还是可以学来耍耍，接下来，我们来一步一步揭开它的神秘面纱。

shape-outside

这个属性定义了一个行内内容应该包裹的形状，默认值是 margin-box

关键字值

1、margin-box   // 形状包含元素的margin值  content + margin
	
2、padding-box  // 形状包含padding值 content + padding

3、content-box  // 形状就是元素本身的值 content

4、border-box   // 形状包含元素的border值  content + border

5、none         // 不设置

下面的图可以看到它们之间的差异