负margin的美

最近有一个朋友问我关于margin的问题,才发现原来水平方向上的margin是不能叠加的。于是便查了查负margin(negative margin)。结果发现了这么有趣的东西。

左右列固定,中间列自适应布局

此例适用于左右栏宽度固定,中间栏宽度自适应的布局。由于网页的主体部分一般在中间,很多网页都需要中间列优先加载,而这种布局刚好满足此需求。
html:

<div class="main"> 
 <div class="main_body">Main</div> 
</div> 
<div class="left">Left</div> 
<div class="right">Right</div>

css:

 body{ margin:0; padding:0; min-width:600px; } 
.main{ float:left; width:100%; } 
.main_body{ margin:0 210px; background:#888; height:200px; } 
.left,.right{ float:left; width:200px; height:200px; background:#F60; }
 .left{ margin-left:-100%; } 
.right{ margin-left:-200px; }

效果:


去除列表有边框

项目中经常会使用浮动列表展示信息,为了美观通常为每个列表之间设置一定的间距(margin-right),当父元素的宽度固定式,每一行的最右端的li元素的右边距就多余了,去除的方法通常是为最右端的li添加class,设置*margin-right:0; *这种方法需要动态判断为哪些li元素添加class,麻烦!!!利用负margin就可以实现下面这种效果:
html:

<div id="test"> 
 <ul> 
   <li>子元素1</li> 
   <li>子元素2</li> 
   <li>子元素3</li> 
   <li>子元素4</li> 
   <li>子元素5</li> 
   <li>子元素6</li> 
 </ul> 
</div>

css:

 body,ul,li{ padding:0; margin:0;} ul,li{ list-style:none;} 
#test{ width:320px; height:210px; background:#CCC; } 
#test ul{ margin-right:-10px; zoom:1; } 
#test ul li{ width:100px; height:100px; 
background:#F60; margin-right:10px; margin-bottom:10px; float:left; }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,809评论 1 92
  • 目录 背景 margin负值的原理2.1 基于参考线的原理图2.2 实际demo2.2.1 margin-left...
    流云家的梦溪阅读 981评论 0 1
  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 8,214评论 3 30
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,318评论 0 5
  • 上午有潘老师提及没新内容,智慧与心态有关,等等,对我是有帮忙的。进一步聚焦智慧。向外,借技术,近智慧;向内,用反思...
    雪糕冰脚阅读 198评论 1 1