css 外边距问题

垂直外边距合并

三种情况
1.上下两个元素的margin-bottom、margin-top加法运算后合并在一起，作为最终间隔的距离。它们共享外边距，也就是你看到他们的外边距都是同一块地方

2.父元素同时没有padding-top和border-top，其margin-top和子元素margin-top合并在一起。效果为子元素与父元素没有拉开距离，而是使其父元素顶开它(父元素)的相邻元素。这里不是共享外边距，父元素只是单纯的连带着去顶开其他元素。

3.空元素(height=0)，上下边距合并。注意仍然可能合并后再次和垂直方向的其他外边距合并。

边距参照

问题：当父元素内多个子元素margin、width、height的值是百分比时，父元素大小最终是多少？会不会存在死循环？
当margin-top、padding-top的值是百分比时，分别是如何计算的？

• 参照父元素宽度的元素：padding margin width text-indent
• 参照父元素高度的元素：height
• 参照父元素属性:font-size line-height
• 特殊：相对定位的时候，top(bottom) left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度

边距没有死循环，边距取父亲宽度的百分比。
高度方面，如果没有为父元素设置height，则子元素的百分比高度无效，子元素高度根据内部元素计算出固定高度。父元素计算高度时没有形成死循环。
宽度方面，假如父元素是块级元素，其有默认宽度(占据所在行的全部宽度)，所以即使没有显式设置父元素width，子元素的百分比仍然有效。

边距为负数

如div，父元素的高度实际就是把所有子元素的margin+border+padding+height+scroll（滚动条）进行加法运算。如果边距为负数且值太大，计算后会得到负数，此时父元素高度将为0。