margin系列以内秀篇（二）

本系列摘自  飘零雾雨的博客

可挖掘性

以前已经写过一篇关于 margin 应用场景的文章：margin系列以内秀篇，固然，它的应用场景会远大于文中所述，没法一一列举。

因此本篇权当是对此的补遗好了，各位客官若有比较Cool的想法均可以留言给我，我会视状况补丁进来。

1像素圆角

这有什么好聊的吗？border-radius 瞬间可将之秒杀。恩，有的时候你不得不认可CSS3真是一把大杀器。不过当年咱们是怎么作的？（会暴露年龄么？）

先看看咱们要作什么,图一：

（图一）

如上图一，咱们会这样写：

HTML

<div id="demo">     <a href="?"><span>1px圆角</span></a>     <a href="?"><span>肯定</span></a>     <a href="?"><span>取消</span></a> </div>

CSS

#demo a,#demo span{     display:inline-block;     vertical-align:top; } #demo span{     margin:1px -1px; /* 关键规则 */ }

一条CSS规则咱们就能够实现1px圆角，你信吗？来看DEMO1：margin实现1px圆角

看到DEMO1的结果后，你会发现咱们确实作到了1px圆角，很简单，有木有？在没有 border-radius 的年代，咱们也很欢乐。

看到Code后，我想应该不用太解释为何能够实现？

BTW，多像素圆角也能够参考这种方式来实现，若是你实在不想用图片的话。

已知宽高元素水平垂直居中

必须说，这是一个很是典型的 margin 应用，虽然现在看起来貌似使用场景不是太大，但仍是好多人喜欢在面试时对人问起，我偶尔也会，但很少。

假设一个宽300px，高300px的盒子要在整个页面中水平垂直居中，咱们能够这样作：

HTML

<div id="demo">这是一个水平垂直居中的容器</div>

CSS

#demo{     position:absolute;     top:50%;     left:50%;     width:300px;     height:300px;     margin-top:-150px;     margin-left:-150px; }

恩，是的，借助绝对定位。咱们先来看看 DEMO2：margin实现已知宽高元素水平垂直居中

先经过 top/left 将 #demo 的绝对定位流起始位置设置为当前屏的中心点，此时 #demo 的左上角这个点其实已是相对于页面水平垂直居中了，因为它的宽度和高度都是300px，因此从起始位置向右下各延伸300px后才是整个 #demo 的真正位置。此时整个 #demo 其实并非水平垂直居中的，除非咱们将 #demo 的中心点放在当前屏的中心点上。怎么作？

这时咱们就须要使用 margin 了，在 margin系列之与相对偏移的异同 这篇文章里，咱们就说过 margin 是以自身做为参照物进行位置偏移的。因此咱们只须要将 #demo 相对自身向上偏移150px，向左偏移150px，就可以实现将自身的中心点放在当前屏的中心点上，也就实现了自身在当前屏的水平垂直居中。

为何代码里是 -150px ？好吧，若是用 margin-top 来实现向上偏移，必须是负值，不是么？若是是正值的话，就是向下偏移了，其实也至关因而 margin-bottom 的正值， margin-left 亦然，咱们在 margin系列之与相对偏移的异同 文章最后一样说过这个。基础知识很重要，有木有？

tabstrip底边线重合

先上个需求，如 图二：

（图二）

看到 图二 ，我想你们可能知道可能知道要作什么了。

对，咱们要作的就是 tab 项与底边线重合，这应该是咱们常见的场景了，margin 仍然是最佳选择。先来看代码：

HTML

<div id="demo">     <a href="?">分类一</a>     <a href="?" class="on">分类二</a>     <a href="?">分类三</a>     <a href="?">分类四</a> </div>

CSS

#demo{     border-bottom:1px solid #aaa; } #demo a{     display:inline-block;     margin-bottom:-1px;     border:1px solid #aaa; } #demo .on{     border-bottom-color:#fff; }

要实现 tab 中各项与包含块的底边线重合，重点在于将包含块的底边线向上偏移1px，这样就与 tab 各项的底部重合在一块儿。

怎样能够作到让包含块底边线向上偏移1px？恩，margin 是那么的顺其天然。咱们只须要将 tab 各项的 margin-bottom 设置为 -1px 便可，其自己高度不变，但包含块底部会向上1px。

来看看具体实现的例子 DEMO3：tabstrip底边线重合

双重边线

实际场景可能比这会稍复杂一些，咱们看个大概便可，主要是拓宽一下思路，来看 图三：

（图三）

从图三中，咱们能够看到每行都会有一个双色的边线，这就是咱们要作的，HTML代码大约是这样：

HTML

<div id="demo">     <ul>         <li>这是一个双重边线的示例</li>         <li>这是一个双重边线的示例</li>         <li>这是一个双重边线的示例</li>         <li>这是一个双重边线的示例</li>     </ul> </div>

怎么作？恩，咱们能够用常规的方式来解决，好比彻底使用 border ：

CSS Case1

#demo li{     border-top:1px solid #fff;     border-bottom:1px solid #ccc; }

结果出来后，咱们会发现最顶部多出了一条线，同时最底部又少了一条线。固然，这均可以被解决，咱们可让 ul 来辅助完成，例如让其 负margin-top + border-bottom，不过若是 ul 或者其父元素有垂直方向 padding 的话，处理起来可能会稍显蛋疼。

还有其余解？固然，会有的，来看：

CSS Case2

#demo ul{     overflow:hidden;     background:#fff; } #demo li{     margin-bottom:1px;     border-bottom:1px solid #ccc;     background:#eee; }

是的，选择 margin 做为实现手段。以 ul 的底色配合 margin 模拟出线条的外观，这其实也挺讨人喜欢的，不是么？看具体实现 DEMO4：双重边线

margin 模拟边线还能够作什么？好比作个表格神马的，看看 DEMO5：margin模拟表格边线