margin负值的应用

CSS盒模型中,margin是我们老熟悉的一个属性了, 它的负值你用过吗? 你知道margin负值的秘密武器吗?我们一起看看吧!

带竖线分隔的横向列表

横向列表.jpg

传统的分隔符是使用 “|” 来实现的,弊端显而易见,不利于表现与结构的分离,同时增加了后台输出时的判断工作。所以我们采用border-left 左边框来模拟分割线,然后通过margin-left:-1px隐藏掉第一个列表项的边框,父元素设置 overflow:hidden 来隐藏溢出部分,这样完美达到首尾无分割线的要求。

2012-5-4 更新

实际测试中发现 iphone safari 设置margin负值=border-widht 并不能很好的隐藏,还有约0.5px的细线,iPad没测不知道如何?修复方法如下:

/*  修复iphone safari 不能完全隐藏边框的bug  */

@media  screen and (max-device-width: 480px){

.nav-list-item { margin-left:-2px; }

.ui-tab-trigger-item { margin-bottom:-2px; }

}

iphone-safari-bug.jpg

 

带底部分割线的竖向列表

纵向列表.jpg

纵向列表.jpg

原理同横向列表相同,需要注意的是 margin 负值在 IE 中的层级bug,详细参见:IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常,得到的最终解决方案是用 zoom:1确保触发hasLayout,然后设置position:relative。

两栏、三栏自适应布局

自适应布局.jpg

自适应布局.jpg曾经有这样一个经典的需求:

1)两栏抑或三栏布局,主体自适应宽度;

2)一个或两个侧边栏固定宽度;

3)主体部分xhtml结构在最前面(网速慢时可以优先显示,对SEO有利)

4)自适应高度,且不影响等高;

5)兼容IE6+,firefox,chrome,opera。

于是乎margin负值便大放光彩,首先是国外出现的圣杯布局,掀起一股margin负值热潮。紧接着在栅格化布局大行其道的淘宝,玉伯大湿进一步 利用margin负值,创造了同一种xhtml结构,两栏或三栏位置通过css任意调整的布局,玉伯美其名曰:双飞翼布局–比翼双飞,像鸟儿翱翔蓝天一 样自由。(双飞翼布局完整demo) 至此,margin负值在布局之路上配合float妹子,已经发挥得淋漓尽致。

优雅的demo

多栏等高

多栏等高.jpg

多栏等高.jpg正 如上面所说,有时候我们还希望多栏等高,使页面看起来更美。于是便有了经典的 padding-bottom:9999px;margin-bottom:-9999px;先通过padding把盒子扩展到足够高,然后通过 margin伪娘把它给拉回来,最后父元素设置overflow:hidden隐藏溢出,这样多栏布局中就会以最高栏为其他栏的视觉高度。

当然万物没有完美的,这种等高方法的弊端如下:

1)当高度超过9999px时候失效,当然一般高度不会超过这个,也可以设置为最大值 32767px(为啥,因为int的最大值就是32767,超过这个数值会以最大值计算)

2)无法设置底部边框

其他的就不多说了,以后会专门写一篇多栏等高的文章,详细介绍各种方法的利弊,大家按需使用。

产品列表

多栏等高.jpg

有时候会要求一行产品列表左右两边是没有空隙的,中间有一定的间距;比如我们设置了li { margin-right:20px;} 那么最后一个肯定也是有20px的间距的,怎么办?我们可以通过设置父元素(比如ul)margin-right:-20px; 来扩展容器的宽度,然后把整体的宽度加在最外层的元素上,此处如果把宽度加在了父元素上(比如ul)会导致此方法失效,因为宽度定死了,margin负值便无法扩展容器的宽度了。

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

居中.jpg

对于水平居中当然我们有更好的方法,块级元素设置 margin-left:auto; margin-right:auto; 行内元素可以使用 text-align:center 。垂直居中就不多说了,深入研究又是一篇文章了!

模拟表格线

表格线.jpg

上面的布局通过表格当然很好实现,但是前几天 点点 老兄说这个结构要用 ul无序列表来写,第一时间便想到了用 inline-block 和margin负值来做了。实际中问题还是挺多的,遇到了IE宽度奇偶BUG。国外大神的解决方法是 body{margin-left:1px; },但是发现治标不治本,IE6和7还是坑爹。于是想到了把li的宽度设置为小数 width:49.99%; 虽然IE6-7右边框还是有一点点错位,但是视觉上基本可以了,无需刻意追求1px的差异。

然后 点点 老兄又说了:如果用CSS3 如何写呢?那么自然想到了 columns 属性,研究发现这爷们居然也有IE的奇偶癖好了,两列的时候,li 如果是奇数除了chrome,其他现代浏览器都越好似的,一起错位了。

这个问题我们下回分解,margin负值能很好的解决这样的需求了,兼容性也不错。

tab选项卡

最后说说demo中的整体结构选项卡中同样用到了 margin 负值,选中状态下,我们需要隐藏掉底部边框。

在选项卡中,遇到了 firefox box-shadow 导致 outline 扩展的bug,解决方案见demo


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流