WEB中常用的margin重叠式应用

今天谈点CSS比较基础的问题：margin重叠。提到这个属性，大伙应皆知，如果阁下去比较大的公司面试的时候，可能被问到这个问题。其实我今天主要讲的是margin重叠的一些常用应用。在讲其应用之前我们先了解2个基本概念：

什么是margin重叠呢？

在CSS中，两个或以上的块元素（可能是兄弟，也可能不是）之间的相邻外边距可以被合并成一个单独的外边距。通过此方式合并的外边距被称为重叠，且产生的已合并的外边距被称为重叠外边距。举个简单例子

html代码：

1. <div>

2.     <p>WEB前端之家-margin重叠实例1</p>

3.     <p>WEB前端之家-margin重叠实例2</p>

4. </div>

css代码：

1. p{margin:20px}

我们可以猜测下，两个P块元素之间的间距会是多少呢，很多朋友可能都会说是40px【哥们先在TX面试的也是这样说的】。

HOHO，对不起，你错了，是20px，因为他们折叠了。

是什么原因导致的呢，经过分析主要是三点，如下:

● 发生重叠需要是相邻的非浮动元素；

● 重叠发生在垂直外边距上，即margin-top和margin-bottom；

● 重叠后取其中最大的那个margin值作为最终值。

好啦，大伙对margin重叠是不是有了一定的了解了呢，好吧，下面接着看另外一个概念吧。

什么是垂直边缘毗邻？

处于同一个块级上下文中的块元素，没有行框、没有间隙、没有内边距和边框隔开它们，这样的元素垂直边缘毗邻，也称之为相邻。这个概念比较简单啦，就不在这里啰嗦了。

了解完以上2个基本概念后，我们就进入应用，让大家更加深入认识margin重叠的实用性：

1、TAB切换底线对齐

实例效果：

HTML:

1. <div class="tab">
   

2.   <a>margin重叠1</a>
   

3.   <a class="on">margin重叠2</a>
   

4.   <a>margin重叠3</a>

5.   <a>margin重叠4</a>

6. </div>
   

CSS:

1. .tab{width:500px;margin:50px auto;hei ght:26px;border-bottom:solid #ccc 1px}

2. .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}

3. .tab .on{background:#fff;border-bottom-color:#fff}

其原理就是所有A元素向下偏移了1px，即属性设置margin-bottom:-1px。详情请戳：Demo

2、立体感的列表线条

实例效果：

HTML:

1. <div class="tab">

2.   <ul>

3.    <li>这是一个双重边线的示例</li>

4.    <li>这是一个双重边线的示例</li>

5.    <li>这是一个双重边线的示例</li>

6.    <li>这是一个双重边线的示例</li>

7.  <ul>

8. </div>

CSS:

1. .tab{width:500px;margin:50px auto;hei ght:26px;border-bottom:solid #ccc 1px}

2. .tab ul{overflow:hidden;background:#fff}

3. .tab li{padding:3px 10px;margin-bottom:1px;border-bottom:1px solid #ccc;background:#eee}

当然实现这样的效果我们也有其他办法，可以不需要用背景色来实现。直接定义大框架背景色，然后给li定义上下border颜色，根据需求也可以定义ul的border属性，看情况而定。

3、圆角实现

实例效果：

HTML:

1. <div class="tab">

2.    <a href="#"><span>添加城市</span></a>

3. </div>

CSS:

1. .tab a,.tab span{display:inline-block;vertical-align:top}

2. .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，且不包含行框，且其属于常规流的所有孩子的外边距都折叠了，则折叠其外边距。

总结：

写完这些，脑壳都发昏了，如果能帮到到家，辛苦点也开心，哈哈，如果意见，欢迎留言吐槽！

在此也提前祝大家“元宵节&情人节”快乐，马上有对象哦！！o(∩_∩)o