码迷,mamicode.com
首页 > 其他好文 > 详细

margin负值 – 一个秘密武器

时间:2014-07-24 04:58:38      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   os   

bubuko.com,布布扣

 

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

  1、带竖线分隔的横向列表(例如:网站底部栏目)

bubuko.com,布布扣

 

  传统的分隔符是使用 “|” 来实现的,弊端显而易见,不利于表现与结构的分离,同时增加了后台输出时的判断工作。

  所以我们采用border-left 左边框来模拟分割线,然后通过margin-left:-1px隐藏掉第一个列表项的边框,父元素设置 overflow:hidden 来隐藏溢出部分,这样完美达到首尾无分割线的要求。

  实际测试中发现 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; }

  }

  2、带底部分割线的竖向列表(例如:新闻列表)

bubuko.com,布布扣

 

  原理同横向列表相同,需要注意的是 margin 负值在 IE 中的层级bug,详细参见:

  IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常,得到的最终解决方案是用 zoom:1确保触发hasLayout,然后设置position:relative。

  3、两栏、三栏自适应布局

bubuko.com,布布扣

 

  曾经有这样一个经典的需求:

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

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

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

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

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

  于是乎margin负值便大放光彩,首先是国外出现的圣杯布局,掀起一股margin负值热潮。

  紧接着在栅格化布局大行其道的淘宝,玉伯大湿进一步利用margin负值,创造了同一种xhtml结构,两栏或三栏位置通过css任意调整的布局,玉伯美其名曰:双飞翼布

  局--比翼双飞,像鸟儿翱翔蓝天一样自由。(双飞翼布局完整demo) 至此,margin负值在布局之路上配合float妹子,已经发挥得淋漓尽致。

  优雅的demo

  4、多栏等高

bubuko.com,布布扣

  正如上面所说,有时候我们还希望多栏等高,使页面看起来更美。于是便有了经典的padding-bottom:9999px;margin-bottom:-9999px;

  先通过padding把盒子扩展到足够高,然后通过margin伪娘把它给拉回来,最后父元素设置overflow:hidden隐藏溢出,这样多栏布局中就会以最高栏为其他栏的视觉高度。

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

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

  2)无法设置底部边框

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

margin负值 – 一个秘密武器,布布扣,bubuko.com

margin负值 – 一个秘密武器

标签:style   blog   http   color   使用   os   

原文地址:http://www.cnblogs.com/aobingyan/p/3864205.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!