今天，让我们来谈谈CSS的基本问题：马克重叠。说到这个属性，我们都知道，如果你去一家大公司面试，你可能会被问到这个问题。事实上，我今天主要谈论的是马克重叠的一些常用应用程序。在谈论其应用程序之前，我们首先了解了两个基本概念：
margin重叠是什么？
在CSS中，两个或两个以上的块元素(可能是兄弟，也可能不是)之间的相邻外距可以合并成单独的外距。这样合并的外距称为重叠，合并的外距称为重叠外距。举个简单的例子
html代码：
- <div>
- <p>WEB前端之家-margin重叠实例1</p>
- <p>WEB前端之家-margin重叠实例2</p>
- </div>
css代码：
- p{margin:20px}
我们可以猜测两个P块元素之间的间距是多少。很多朋友可能会说是40px【哥们先在TX面试的时候也这么说】。
HOHO，对不起，你错了，是20px，因为它们折叠了。
原因是什么？分析主要有三点，如下：
● 重叠需要相邻的非浮动元素；
● 在垂直外边距上重叠，即margin-top和margin-bottom；
● 重叠后，以最大的margin值为最终值。
嗯，大家对margin的重叠有一定的了解吗？好吧，我们来看看另一个概念。
垂直边缘的邻近是什么？
同一块级上下文中的块元素没有行框、间隙、内边距和边框分开。这些元素的垂直边缘相邻，也称为相邻元素。这个概念比较简单，这里就不啰嗦了。
在了解了以上两个基本概念后，我们将进入应用程序，让大家对margin重叠的实用性有更深入的了解：
1、TAB切换底线对齐
实例效果：
HTML:
- <div class=”tab”>
- <a>margin重叠1</a>
- <a class=”on”>margin重叠2</a>
- <a>margin重叠3</a>
- <a>margin重叠4</a>
- </div>
CSS:
- .tab{width:500px;margin:50px auto;hei ght:26px;border-bottom:solid #ccc 1px}
- .tab a{margin:0 2px -1px;display:inline-block;height:25px;line-height:25px;
text-align:center;padding:0 3px;background:#f5f5f5;border:solid #ccc 1px} - .tab .on{background:#fff;border-bottom-color:#fff}
其原理是所有A元素向下偏移1px，即属性设置margin-bottom:-1px。详情请戳:Demo
2、列表线的立体感
实例效果：
HTML:
- <div class=”tab”>
- <ul>
- <li>这是双边线的例子</li>
- <li>这是双边线的例子</li>
- <li>这是双边线的例子</li>
- <li>这是双边线的例子</li>
- <ul>
- </div>
CSS:
- .tab{width:500px;margin:50px auto;hei ght:26px;border-bottom:solid #ccc 1px}
- .tab ul{overflow:hidden;background:#fff}
- .tab li{padding:3px 10px;margin-bottom:1px;border-bottom:1px solid #ccc;background:#eee}
当然，我们也有其他方法可以实现这种效果，而不需要使用背景颜色。直接定义大框架背景颜色，然后定义li上下border颜色，也可以根据需要定义ulborder属性，这取决于情况。
3、圆角实现
实例效果：
HTML:
- <div class=”tab”>
- <a href=”#”><span>添加城市</span></a>
- </div>
CSS:
- .tab a,.tab span{display:inline-block;vertical-align:top}
- .tab span{margin:1px -1px}
虽然CSS3现在可以很容易地实现圆角，但它仍然不能与所有浏览器兼容，所以这种方法仍然可以在PC端使用。但是我测试过，这种方法不支持IE6，我忽略了，哈哈。
让我们先介绍一下这些简单的应用程序。margin重叠将用于许多地方，特别是当我们使用响应布局时，我们将有机会在未来讨论它们。这时可能会有童鞋要问，如果能不能让它们重叠。在前人的指导下，总结出一些避免措施 重叠margin的条件如下：
■ Margin重叠元素只发生在块元素上；
■ 浮动元素与其他元素不同 重叠margin；
■ 将属性overflow定义为visible(即创建新的块级格式化上下文)的块元素，margin不与其子元素发生关系 折叠；
■ 元素的绝对定位 margin 不与任何 margin 发生折叠；
■ 特殊:根元素 margin 与其他任何事情不同 margin 发生折叠；
■ 如果常规流中的一个块元素没有 border-top、padding-top，此外，如果第一个浮动块级子元素没有间隙，则该元素的上外边距将与其常规流中第一个块级子元素的上外边距折叠。也许有些绕，我们来验证一下，在它的第一个浮动子元素中加上一个全角空间作为间隙；
■ 假如一个元素 min-height 属性为0，没有上下边框和上下内边距， height 为0或者 auto，而且不包括行框，属于常规流的所有孩子的外距都折叠了，所以折叠了它的外距。也许有些绕，我们来验证一下，在它的第一个浮动子元素中加上一个全角空间作为间隙；
■ 假如一个元素 min-height 属性为0，没有上下边框和上下内边距， height 为0或者 auto，而且不包括行框，属于常规流的所有孩子的外距都折叠了，所以折叠了它的外距。
总结：
写完这些，脑壳都晕了，如果能帮到家，辛苦点也开心，哈哈，如果有意见，欢迎留言吐槽！
这里也提前祝大家“元宵节”&情人节快乐，马上就有对象了！！o(∩_∩)o
