dom结构发生改变就会触发重排；重排一定会触发重绘；改变背景颜色会触发重绘
1.单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
2.::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after
思路：统一向左浮动，中间的放在最前面浮动顺序中间->左边->右边，浮动后因为中间的宽度为100%；所有中间的占据一行；
左边的和右边的按顺序排列在下面；如果中间的不为100%的话，三者应该在同一条线上，向让左边的移动到中间的左边上面去可以给左边的加margin-left: 负中间的宽度的值；因为左边已经移动到中间的左边了，所以中间的右边紧挨着右边的；然后右边的在中间的右边的话只需要给右边margin-left:负右边自己的宽度的值；这样就把左边和右边分别放在了中间的左边和右边的位置；会遮挡中间部分内容；这是给外层container加padding: 0 右边宽度 0 左边宽度；这时中间左右会有空白，接下来我们只需要给左右 position: relative定位，然后左边left:自己的宽度；右边right: 自己的宽度就可以了
2.2、在父元素和子元素之间得应用（重难点）
1、父子之间水平距离
在子元素中设置margin-left，其值实际上是子元素的左边框距离父元素左padding内侧的距离。margin-right同理也是
在子元素中设置垂直方向得margin
-----问题:没有效果和父元素一块下来了
原因：实际上这是因为当父元素没有设置padding值以及border值时，出现了一个bug–父元素的上方与子元素的上方完全重合在了一起，无法分开。所以才会导致上述这种父元素和子元素同时向下的情况。
解决办法
可以使用 DrawArc 方法来实现有间隔的圆。这个方法需要提供七个参数：左上角 X 坐标、左上角 Y 坐标、右下角 X 坐标、右下角 Y 坐标、开始弧度、结束弧度、是否使用顺时针绘制（true 为顺时针）。
