最近听一个朋友说，在做一个小小的项目，但是在项目上遇到了一个问题，感觉问题不大，但是在这个问题上面纠结了好长时间也没用解决，感觉特别的闹心，这个问题就是CSS框模型中外边距折叠的问题。刚听到这个问题也感觉有点迷糊，后来和朋友关于这个问题在一起研究了一些时间 ，现在也和大家说说。
关于CSS框模型中外边距折叠的介绍：
1. 关于CSS框模型中外边距折叠：指的是毗邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距。其触发条件：毗邻，没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系。这些 margin 都处于普通流中，即非浮动元素，非定位元素。
2.CSS框模型中外边距折叠的垂直方向外边距合并的计算方法：参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。
AB。
3.CSS框模型中外边距折叠的参与折叠的 margin 都是负值：取的是其中绝对值较大的，然后，从 0 位置，负向位移。
AB。
4.CSS框模型中外边距折叠的参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
AB.
5.相邻的 margin 要一起参与计算，不得分步计算。要注意，相邻的元素不一定非要是兄弟节点，父子节点也可以，即使不是兄弟父子节点也可以相邻。而且，在计算时，相邻的 margin 要一起参与计算，不得分步计算。
在上文中关于CSS框模型中外边距折叠做了一些简单的介绍，大家可以看到在计算的时候是需要有代码参与的，这些代码运行之后，最后就会得到一个红色边框的正方形，并且方框的宽和高都应该是 100px，关于上文的介绍大家有没有看的明白呢?希望上文的介绍对大家会有些帮助。
